前几天有个项目要实现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 });
调用方法同上。
欢迎交流，转载请注明出处。
|
作者：Bonker 出处：http://www.cnblogs.com/Bonker QQ：519841366 |
|