日期:2014-05-16  浏览次数:20408 次

关于表头固定的问题
从网上找了几个jquery固定表头插件,发现一个共同问题就是表格数据量比较大(1000多条)时很慢,同时对老版本浏览器兼容性不是很好,有没有比较适合大量数据的固定表头插件呢?
------解决方案--------------------
你给的插件我看了,处理的比较复杂。我写了非常简单的一个,只在当前显示区固定表头。后续没有事件,对数据量大的情况应该不会卡。不过我是通过clone元素来写的,有点浪费空间。你看一下对你有没有帮助。
js代码如下,
(function () {
    jQuery.fixTableHead = function (selecter, bodyheight) {
        var a = $(selecter);
        var b = $(selecter).clone();

        var headheight = a.find("thead").height();

        b.css("margin-top", "-" + headheight + "px");
        $("<div style='height:" + bodyheight + "px;overflow:scroll;'></div>").insertAfter(a).append(b);
        a.wrap("<div style='height:" + headheight + "px;overflow:hidden;'></div>");
    }
 
})();


------解决方案--------------------
完全复制一份是为了让表头和复制后的表内容各列宽对齐。如果只是想固定,不要求对齐,不用复制,直接分离就可以。但是正常情况下,表列宽度会根据内容自动调整,这样头和内容基本上是对不齐的。

不复制内容的写法如下
        var a = $(selecter);
        var b = $(selecter).clone().empty().append(a.find("tbody"));
        $("<div style='height:" + bodyheight + "px;overflow:scroll;'></div>").insertAfter(a).append(b);