Asp.net GridView 使用 jQuery-plugin tablescroll 固定欄位名稱

Gridview 呈現的資料列太多可以用分頁來顯示,但如何固定標頭的方式來顯示呢?可能大家都有自已的一套方法吧。而使用 jquery-plugin:tablescroll 也許是個簡單又快速的方法。它可以很快的就將你GridView所生出來的tableb分出table-head(固定的欄位名稱)和table-body(可以捲動的資料列)。但首先必需要將gridview寫出前端網頁時能分出「thead」和「tbody」,如此tablescroll才能發揮它的作用固定欄位名稱。

如何讓Gridview產出thead標籤,可以在GirdView_PreRender的事件中設定。
範例如下:

Protected Sub GridView1_PreRender(sender As Object, e As System.EvenArgs) Handles GridView1.PreRender
    GridView1.UseAccessibleHeader = True
    GridView1.HeadRow.TableSection = TableRowSection.TableHeader
End Sub

至於tableScroll的部份設定超簡單的,就像下面這樣:

$(function(){
    $("#GridView1").tableScroll({height:300});
});

完成以上的步驟,應該是可以讓 GridView 固定欄位名稱標頭列了。除非是Gridview加了太多的樣式在裏面,不然tableScroll處理過後看起來都還算正常。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s