用jQuery实现冻结报头的方法

用jQuery实现冻结报头的方法
本文的示例讲述了用jQuery实现冻结头的方法,供大家参考

前一段时间,当需要显示一个列表做项目,但由于在轧制时头太多的数据必须被冻结,所以我写了下面的脚本(一旦在网上也找到了相应的脚本,但不太好,所以他们写的,但现在因为项目只使用头的冰冻而不必指定冻结到目前为止只能算是一个完整的剧本,列但一般只需要冻结的标题可以使用),现在看看截图
实现了米体以下的冻结,内容可自由滚动。

看代码:

复制代码如下: / / jQuery的一个clonetableheader扩展方法

jquery.fn.clonetableheader =功能(ID,tableparentdivid){

如果有要删除div的话,请获取div头/冻结

var obj = document.getelementbyid(tableheaderdiv+ ID);

如果(obj){

jQuery(obj)删除();

}

无功browsername = navigator.appname; / /浏览器获取信息,区分浏览器的代码隐藏

VaR navigator.appversion版本=;

无功browserversion = parseFloat(ver.substring(ver.indexof(MSIE)+ 5,ver.lastindexof(Windows)))))

无功量= document.getelementbyid(tableparentdivid);

无功scrollwidth = content.offsetwidth - content.clientwidth;

无功tableorg = jQuery(# + ID); / /目录

var = tableorg.clone(表); / /克隆表内容

table.attr(身份

/ /注:要想冻结在螺纹头

无功tableheader = jQuery(tableorg)。找到(线);

无功tableheaderheight = tableheader.height();

tableheader.hide();

无功colswidths = jQuery(tableorg)。找到(TBODY TR:首先TD)。图(函数(){(){

返回jQuery(Width);

};动态访问每个列的宽度

无功tableclonecols = jQuery(表),发现(AD TR:首先TD)

如果(colswidths。大小)(> 0){ / /根据浏览器为冻米宽度(主要在IE8)

为(i = 0;i < tableclonecols.size();i++){

如果(我= = tableclonecols。大小){(1)

如果(browserversion = 8)

tableclonecols.eq(我),Width(colswidths {我} + scrollwidth);

其他的

tableclonecols.eq(我),Width(colswidths {我});

{人}

tableclonecols.eq(我),Width(colswidths {我});

}

}

}

div容器创建了冻结的头文件设置属性

无功headerdiv = document.createelement(div);

headerdiv.appendchild(表{ 0 });

jQuery(headerdiv)。Css(高

jQuery(headerdiv)。Css(溢出

jQuery(headerdiv)。Css(Z

jQuery(headerdiv)。Css(宽

jQuery(headerdiv)。Attr(身份

jQuery(headerdiv)。InsertBefore(tableorg.parent());

}

以上是完整的代码,现在看看如何使用:

只需在页面中添加以下脚本

复制代码代码如下所示:

函数(){()

JQuery.fn.CloneTableHeader(表

});
这是好的,传入表和表所在的div的ID是OK的。必须指出的是,冷冻头必须放进线,否则冻结无法实现。

上面的代码是通过ie6,7,8测试,和FF和Chrome将与割台宽度误差有问题。

完整的实例代码在这里下载

希望本文能对大家的jQuery程序设计有所帮助。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部