GridView固定表頭和首列

GridView固定表頭和首列

當GridVIew中要顯示的數據非常多的時候，用戶常需要開發人員固定表頭或是首列，以保證在拖動滾動條的時候，可以清楚得瞭解到每一列或行的內容。 藉助於CSS的功能，可以將GridView打造成這樣的表格：

首先，要把GridView放在一個<asp:Panel runat=server ID="panel">容器中，然後在頁面中添加如下CSS：

.fixedheader
{
position:relative ;
table-layout:fixed;
top:expression(this.offsetParent.scrollTop -1);
z-index: 10;
}

.fixedheader th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;}

最後將GridView的HeaderStyle屬性集中的CssClass屬性設爲"fixedheader"：

<HeaderStyle Wrap="False" CssClass="fixedheader" />

上述這種方法是以頁面的滾動條爲基準，因此是“this.offsetParent.scrollTop”，實際使用時可以根據需要嘗試其他調整方法

至於固定左邊列的方法與此類似

.fixedLeft
{
position: relative;
left:expression (this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft-4);
z-index:10;
}

其中 expression後的parentElement到底要多少個，需要設置Debugger自己去跟蹤。同時，還要記住設置GridView的背景色，即便是白色也要設：#FFFFFF，不能爲透明。最後，將GridView的ItemStyle中的CssClass設爲"fixedLeft" ，便可得到效果了。