2012年11月7日 星期三

ASP.NET GridView 固定欄位標題列 jQuery

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




分享一個GridView 固定欄位標題列的程式碼,主要是使用jQuery來進行處理,使用說明請參考以下:

1. 下載GridViewScroll.js (直接選擇左上角檔案->下載)

2. 在頁面上加入相關javascript參考 (順序需一致)

2.1. jquery-1.8.2.min.js
2.2. jquery-ui.js
2.3. jQuery-slimScroll (slimScroll.min.js)
2.4. GridViewScroll.js

3.使用下列的HTML將GridView用DIV包起來,GridView的UseAccessibleHeader屬性必須設定為False

<div id="gridHeader">
</div>
<div id="gridItem">
   <asp:GridView ID="GridView1" runat="server"
        UseAccessibleHeader="False" Width="100%">
   </asp:GridView>
</div>

3.1. 如果是使用.NET 4.0 可以再加上屬性ClientIDMode="Static",可以更方便套用此功能.

4. 套用功能

4.1. .NET 4.0 直接於GridView下方加入以下程式:

<script type="text/javascript">ApplayScroll("gridHeader", "gridItem", "GridView1", 250);</script>

4.2. .NET 2.0 在Page_Load加入註冊Script如下:

this.ClientScript.RegisterStartupScript(typeof(WebForm1), "GridView1",
    string.Format("ApplayScroll(\"gridHeader\", \"gridItem\", \"{0}\", 250);", this.GridView1.ClientID),
    true);

5. 執行網頁檢視結果

注意事項:
1. 如果欄位有設定Header寬度,請務必一併設定Row寬度.

沒有留言:

張貼留言