关于asp:GridView和dx:ASPxGridView固定表头的jquery代码封装

前几天有个项目要实现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 });

 

  调用方法同上。

 

欢迎交流，转载请注明出处。

posted @ 2012-08-01 13:20  Bonker  阅读(3073)  评论(2)  编辑  收藏  举报