2015年12月4日 星期五

ASP.NET GridView Header flow by scroll up and down use JQuery | WebForm的Gridview 欄標題 以JQuery置頂的方法

WebForm的Gridview元件想要讓欄標題可以置頂的方法

我的Gridview是用template做版面的,資料很多很長,捲下去時就看不見欄標題,很不方便,

解法參考來源:
http://stackoverflow.com/questions/2177983/how-to-make-div-follow-scrolling-smoothly-with-jquery
answered by ajax333221

1.原本是只有設定HeaderText,現在要加上HeaderTemplate,然後用div包起來標題文字


<asp:TemplateField HeaderText="標題" HeaderStyle-HorizontalAlign="Left">

                                <HeaderTemplate>

                                    <div class="divTH">

                                        <label>標題</label>

                                    </div>

                                </HeaderTemplate>

                                <ItemTemplate>

                                   ......

                                </ItemTemplate>

</asp:TemplateField>


2.div給一個css class,這個class加上fixed時就會固定置頂


.divTH.fixed {

                position: fixed;

                top: 0;

            }


3.JQUERY


$(document).ready(function () {

if (!($.browser == "msie" && $.browser.version < 7)) {

            var target = ".divTH", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));

            $(window).scroll(function (event) {

                if (top <= $(this).scrollTop()) {

                    $(target).addClass("fixed");

                } else {

                    $(target).removeClass("fixed");

                }

            });

        }

});

2015/12/25 追記:
如果有GridView是不要一進網頁就databinding的,那網頁ready的時候就沒有欄位標題可以註冊,
這樣就讓效果無效了,我想到的兩種解決方法:

一種是把Jquery部分改放到function pageLoad() { }事件,
這個事件會在aspx postback回來後觸發
但要判斷有沒有註冊過window scroll 才去註冊那個事件
不然每次post back都會註冊一次 就會有問題
我沒有把這方法做完,改用我想到的第二種方法

第二種比較簡單的方法是,設定gridview屬性ShowHeaderWhenEmpty="true"
然後在page load事件給gridview空的source後bind
gv.DataSource = new DataTable();
gv.DataBind();
這樣就會沒資料但顯示標頭,就可以讓javascript註冊事件

沒有留言:

張貼留言