前幾天有個項目要實現dx:ASPxGridView固定表頭，就翻看了網上實現的方法。總結了一些方法。廢話不多，先上個圖，有圖有真相
圖1，dx:ASPxGridView的上面還有其他元素
圖2 這是基於dx:ASPxGridView固定表頭。
實現固定表頭，首先要把表頭取到，然后拼湊個table。把這個table追加到body里面。再然后就分兩種實現方法了。
1，設置此table的position為fixed。（效果較好，但ie6，和ios5之前的safari不支持）
2，設置table的position為absolute，給window綁定scroll事件。top=scrollTop；（此方法對瀏覽器的兼容比較好，效果沒有第一種方法好）
上代碼，封裝了asp:GridView固定表頭jquery代碼（兼容了ie6，當為ie6時是通過方法2來兼容的）
1 <script type="text/javascript"> 2 $.extend({ 3 bonkerTable: function (id) { 4 var isHaveBonkerTable = false; 5 $(window).scroll(function () { 6 try { 7 var $tr = $("#" + id + " tr:first"); 8 var offTop = $tr.offset().top + $tr.height(); 9 var scrolltop = $(window).scrollTop(); 10 if (offTop <= scrolltop) { 11 if (!isHaveBonkerTable) { 12 isHaveBonkerTable = true; 13 var left = $tr.eq(0).offset().left; 14 var $bonkerTable = $("#" + id).clone().html("").css({ "position": "fixed", "top": "0px", "left": +"'" + left + "'px" }).attr("id", "bonkerTable"); 15 var $newTr = $tr.clone(); 16 var $th = $("th", $newTr); 17 var $td = $("#" + id + " tr:eq(1) td"); 18 for (var i = 0; i < $th.length; i++) { 19 $th.eq(i).width($td.eq(i).width()); 20 } 21 $bonkerTable.html($newTr); 22 $bonkerTable.prependTo("body"); 23 if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { 24 $("#bonkerTable").css("position", "absolute"); 25 var obj = $("#bonkerTable")[0]; 26 window.onscroll = function () { 27 obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + 'px'; 28 } 29 } 30 } 31 } else { 32 if (isHaveBonkerTable) { 33 isHaveBonkerTable = false; 34 $("#bonkerTable").remove(); 35 } 36 } 37 } catch (err) { alert(err); } 38 }); 39 } 40 }); 41 </script>
這是bonker.js代碼
調用代碼
1 <script type="text/javascript"> 2 $(function () { 3 $.bonkerTable("<%=GridView1.ClientID %>"); 4 }); 5 </script> 6 <form id="form1" runat="server"> 7 <div> 8 <asp:GridView ID="GridView1" runat="server"> 9 </asp:GridView> 10 </div>
至於dx:ASPxGridView的封裝就稍微麻煩了點，代碼如下
1 $.extend({ 2 bonkerTable: function (id) { 3 var isHaveBonkerTable = false; 4 $(window).scroll(function () { 5 try { 6 var $table = $("#" + id + " table"); 7 var $th = $("tr:first", $table); 8 var offTop = $th.offset().top + $th.height(); 9 var scrolltop = $(window).scrollTop(); 10 if (offTop <= scrolltop) { 11 if (!isHaveBonkerTable) { 12 $th = $("tr:first", $table); 13 var $td = $(">td", $th[0]); 14 var left = $th.eq(0).offset().left; 15 var bonkerTable = "<table id='bonkerTable' cellspacing='0' cellpadding='0' style='position:fixed;top:0px;left:" + left + "px; font-size:12px;'><tr>"; 16 var tdClass = $("td", $table).eq(0).attr("class"); 17 for (var i = 0; i < $td.length; i++) { 18 bonkerTable += "<td class='" + tdClass + "' style='border-top-width:0px;border-left-width:0px;width:" + $td.eq(i).width() + "px'>" + $td.eq(i).text() + "</td>"; 19 } 20 bonkerTable += "</tr></table>"; 21 $(bonkerTable).attr("class", $table.attr("class")); 22 isHaveBonkerTable = true 23 $(bonkerTable).prependTo("body"); 24 if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { 25 $("#bonkerTable").css("position", "absolute"); 26 var obj = $("#bonkerTable")[0]; 27 window.onscroll = function () { 28 obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + 'px'; 29 } 30 window.onresize = function () { 31 obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + 'px'; 32 } 33 } 34 } 35 } else { 36 if (isHaveBonkerTable) { 37 isHaveBonkerTable = false; 38 $("#bonkerTable").remove(); 39 } 40 } 41 } catch (err) { } 42 }); 43 } 44 });
調用方法如下
<script type="text/javascript"> $(function () { $.bonkerTable("<%=ASPxGridView1.ClientID %>"); }); </script> <dx:ASPxGridView ID="ASPxGridView1" ClientInstanceName="grid" runat="server" ></dx:ASPxGridView>
注意 dx里面， 含有<%=ASPxGridView1.ClientID %> js的代碼不要放到head標簽里面 否則會出現 控件包含代碼塊(即 <% ... %>)，因此無法修改控件集合 錯誤
建議把這段js放到body標簽里面
好了到此 就基本完了。
另附上
只用第2中方式實現的dx固定表頭方法
1 //調用方法 $(function () { 2 // $.bonkerTable("<%=ASPxGridView1.ClientID %>"); 3 // }); 4 $.extend({ 5 bonkerTable: function (id) { 6 var isHaveBonkerTable = false; 7 $(window).scroll(function () { 8 try { 9 var $table = $("table", $("#" + id)); 10 var $th = $("tr:first", $table); 11 var offTop = $th.offset().top + $th.height(); 12 var scrolltop = $(window).scrollTop(); 13 if (offTop <= scrolltop) { 14 if (!isHaveBonkerTable) { 15 isHaveBonkerTable = true; 16 $th = $("tr:first", $table); 17 var $td = $(">td", $th[0]); 18 var left = $th.eq(0).offset().left; 19 var bonkerTable = "<table id='bonkerTable' cellspacing='0' cellpadding='0' style='position:absolute;left:" + left + "px; font-size:12px;'><tr>"; 20 var tdClass = $("td", $table).eq(0).attr("class"); 21 for (var i = 0; i < $td.length; i++) { 22 bonkerTable += "<td class='" + tdClass + "' style='border-top-width:0px;border-left-width:0px;width:" + $td.eq(i).width() + "px'>" + $td.eq(i).text() + "</td>"; 23 } 24 bonkerTable += "</tr></table>"; 25 $(bonkerTable).attr("class", $table.attr("class")); 26 $(bonkerTable).prependTo("body"); 27 } 28 $("#bonkerTable").css("top", scrolltop); 29 } else { 30 if (isHaveBonkerTable) { 31 isHaveBonkerTable = false; 32 $("#bonkerTable").remove(); 33 } 34 } 35 } catch (err) { } 36 }); 37 } 38 });
調用方法同上。
歡迎交流，轉載請注明出處。