2011年6月28日 星期二

ASP.NET自訂控制項 - 固定欄位標題列 ScrollGridView

重要更新:
我們提供了一個更完整的方案,請到以下網址參考: http://gridviewscroll.aspcity.idv.tw/


ASP.NET中GridView是一個非常好用的控制項,但一直以來並無法像Windows Form的控制項一樣可以固定欄位的標題列.其實透過Javascript也是有辦法做到相同的功能,以下是一個展示:


1. 自訂一個ScrollGridView的控制項,使用下列的標記
<Likol:ScrollGridView ID="ScrollGridView1" runat="server" Width="100%">
 <Columns>
  <Likol:TextField HeaderText="ProductID" DataField="ProductID" />
  <Likol:TextField HeaderText="Name" DataField="Name" />
  <Likol:TextField HeaderText="ProductNumber" DataField="ProductNumber" />
  <Likol:TextField HeaderText="Color" DataField="Color" />
  <Likol:TextField HeaderText="Size" DataField="Size" />
  <Likol:TextField HeaderText="ListPrice" DataField="ListPrice" />
  <Likol:TextField HeaderText="Weight" DataField="Weight" />
  <Likol:DateTimeField HeaderText="SellStartDate" DataField="SellStartDate" />
  <Likol:DateTimeField HeaderText="SellEndDate" DataField="SellEndDate" />
  <asp:TemplateField>
   <HeaderTemplate><div> </div></HeaderTemplate>
   <ItemTemplate><div> </div></ItemTemplate>
  </asp:TemplateField>
 </Columns>
 <HeaderStyle CssClass="ScrollGridViewHeader" />
 <RowStyle CssClass="ScrollGridViewItem" />
</Likol:ScrollGridView>


2. 連結資料來源


3. 顯示結果

當顯示範圍超過目前視窗大小會自動顯示出水平與垂直的卷軸


當拉動垂直的卷軸時,GridView的標題列一樣會固定於最上方


當拉動水平的卷軸時,GridView的標題列會跟著內容一起移動


4. 這個控制項的行為一樣可以相容於Google Chrome與Mozilla Firefox




基本上這個控制項是繼承ASP.NET原本的GridView來進行開發,並加入Ajax一些應用來達到這樣的功能.

Updated: Demo - ASP.NET自訂控制項 - 固定欄位標題列 ScrollGridView

沒有留言:

張貼留言