2012年11月29日 星期四

GridViewScroll with jQuery 更新 20121129

更新(20121129):

v0.2.1 增加捲軸大小設定值與執行效能改善
v0.2.2 修正高度計算與滑鼠捲動問題

相關範例請參考: 案 例 展 示



2012年11月22日 星期四

GridViewScroll with jQuery 更新 20121122

更新(20121122):

顯示外觀加強 - 增加使用滑鼠進行內容捲動時捲軸可改變顏色與捲軸箭頭圖片的設定.

2012年11月14日 星期三

GridViewScroll with jQuery 網站正式上線

GridViewScroll with jQuery 測試上線,主要是提供一個快速的解決方案,如下所述:
「輕 鬆 的 將 您 的 GridView 固 定 標 題 列 與 凍 結 欄 位」

有興趣可以到以下的網址看看:
如果您有任何問題,都歡迎您直接來信與我聯繫 E-Mail: twlikol@msn.com

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寬度.