iT邦幫忙

DAY 14
2

ASP.NET技巧系列 第 17

在GridView中使用CSS固定上、左表頭(似Excel凍結視窗)(限IE)(含操作錄影)

小喵這次想在ASP.NET中達到類似Excel凍結視窗的效果。但是中間遇到了幾個狀況,要一一排除掉,小喵將排除的方式記錄如下:

1.首先這樣的方式並非標準的CSS語法,然而開WebForm的時候,aspx裡面都會加入一行來檢查是否是標準的格式,有這行會失敗,必須將此行刪除

2.其次,由於GridView所產生的HTML裡面,自動會加入一個DIV,這會導致CSS中的this.parentElement.offsetParent.parentElement.scrollLeft
取錯,要修正為
this.parentElement.offsetParent.offsetParent.scrollLeft
以下為範例:
首先在樣式表中加入CSS設定

.FixedTitleRow   
{   
    position: relative;    
    table-layout:fixed;
    top: expression(this.offsetParent.scrollTop-2);
    background-color:White;
    z-index: 10;   
}   

.FixedTitleRow th
{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
    padding:2px;
}
   
.FixedTitleColumn   
{   
    position: relative;    
    left: expression(this.parentElement.offsetParent.scrollLeft-2);   
}   
   
.FixedDataColumn   
{   
    position: relative;   
    left: expression(this.parentElement.offsetParent.offsetParent.scrollLeft-2);   
} 

接著新增aspx檔案,記得去除


使用方式很簡單

固定左邊的資料行中,設定HeadStyle的CssClass=FixedTitleColumn,以及ItemStyle的CssClass=FixedDataColumn
整個GridView的HeadStyle設定CssClass=FixedTitleRow
這樣就完成了!!
設定過程錄影說明


上一篇
幫助初學者建立連接字串(Connection String)的兩種方式(含影片教學)
系列文
ASP.NET技巧17

尚未有邦友留言

立即登入留言