用 jQuery 將 GridView 改成固定欄位名稱的樣式

先講述一下設定值 GridView’s table-layout:fixed width:900px ,固定 GridView 寬度。其中每個欄位的寬度也都有指定寬度。

//檢查目標元素是否有scrollbar的函式
(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);
var edit_row_top=0;//編輯列的高度位置標記
$(document).ready(function () {
    //寫出一串標籤物件這是為了給thead插入用的並將它加到body下
    $("<div id='float_table_wrapper'><table id='float_table' rules='all' style='table-layout:fixed;width:900px;border:1px solid gray;padding:0px;border-spacing:0px;margin-bottom:5px;'><thead></thead></table></div>").appendTo("body");
    //複製欄位名稱資料列,並將它附加到剛新增的網頁元素中
    $("table#GridView1 tr:first").clone().appendTo("#float_table thead");
    //將固定的欄位名稱資料列table插到,原來gridview父元素之前
    $("#float_table_wrapper").insertBefore($("#GridView1").parent());
    //移除gridview第一列資料(欄位名稱資料列)
    $("table#GridView1 tr:first").remove(); //.css({ display: "none" });
    //指定Gridview的高度,並設定overflow:auto
    $("#GridView1").parent().css({ height: "350px", overflow: "auto" });
    //如果gridview有scrollbar出現,gridview的寬度+15
    if ($("#GridView1").parent().hasScrollBar()) {
        $("#GridView1").parent().css({ "width": "915px" });
    }

    //處於編輯狀態,將編輯資料列置頂
    $("table#GridView1 tr").each(function () {
        if ($(this).find("input").length > 0) {
            normal_row_height = $(this).prev("tr").height();
            edit_row_top = $(this).index() * normal_row_height;
        }
    });
    $("#GridView1").parent().animate({ scrollTop: edit_row_top }, 10);
});

固定名稱欄位的成果

Postback後,自動滾動到編輯中的資料列

發表迴響

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

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