[jQuery]ASP.NET GridView 凍結窗格

css jquery asp.net excel gridview webform mis2000lab asp.net rowdatabound css header 凍結窗格

mis2000lab 2015-09-30 11:45:16 ‧ 18668 瀏覽

分享至

透過 jQuery特效，將 GridView的標題欄位「凍結窗格」

有位學員找到這個很棒的範例
http://gridviewscroll.aspcity.idv.tw/

感謝原作者無私分享，非常實用的好範例！
原作的網站 http://gridviewscroll.aspcity.idv.tw/

因為原作網站只提供HTML檔（執行後的原始碼）
所以我提供兩種作法，可以搭配 ASP.NET (Web Form) GridView

方法一：透過RowDataBound事件來處理

方法二：直接把CSS加入表頭（標題）欄位＆資料列的「CssClass」屬性

不過，我們都需要事先觀察原作的範例是怎麼做的？
才能把必要的元素，加入自己的ASP.NET控制項裡面

可以看見表格的「表頭」加上了這一段 class="GridviewScrollHeader"
資料列裡面放入這一段 class="GridviewScrollItem"

<table cellspacing="0" id="GridView1" style="width:100%;border-collapse:collapse;">
<tr class="GridviewScrollHeader">
<td colspan="2">Product</td><td rowspan="2">ListPrice</td><td rowspan="2">StandardCost</td><td colspan="2">Package</td><td rowspan="2">SafetyStockLevel</td><td rowspan="2">ReorderPoint</td><td rowspan="2">SellStartDate</td>
</tr><tr class="GridviewScrollHeader">
<td>Name</td><td>Number</td><td>Weight</td><td>Size</td>
 
</tr><tr  class="GridviewScrollItem">
&lt;td style="background-color:#EFEFEF;">HL Mountain Frame - Black, 38&lt;/td>&lt;td style="background-color:#EFEFEF;">FR-M94B-38&lt;/td><td>1349.6000</td><td>739.0410</td><td>2.68</td><td>38</td><td>500</td><td>375</td><td>7/1/2005 12:00:00 AM</td> 
</tr><tr  class="GridviewScrollItem">
&lt;td style="background-color:#EFEFEF;">HL Mountain Frame - Silver, 38&lt;/td>&lt;td style="background-color:#EFEFEF;">FR-M94S-38&lt;/td><td>1364.5000</td><td>747.2002</td><td>2.68</td><td>38</td><td>500</td><td>375</td><td>7/1/2005 12:00:00 AM</td>
</tr><tr class="GridviewScrollItem">
<td........>
</table>

文章較長，詳見全文：
[jQuery]將您的表格或GridView固定標題列與凍結欄位 (gridviewscroll.aspcity.idv.tw)

http://www.dotblogs.com.tw/mis2000lab/archive/2015/09/30/153463.aspx