使用固定标题滚动JTABLE内容

时间:2014-06-21 09:22:00

标签: javascript jquery jtable scroll jtableheader

我正在使用jtable滚动内容。我在这里有一个代码,问题是我想带来' jtable tbody'到我的桌子上

脚本

     var oTbl;
    var newTbl;
    function scrolify(tblAsJQueryObject, height) {
        debugger;
        $('.jtable-title').remove()
        oTbl = tblAsJQueryObject;
        var oTblDiv = $("<div id='BodyDiv'/>");
        oTblDiv.css('height', height);
        oTblDiv.css('overflow', 'auto');
        oTbl.wrap(oTblDiv);
        oTbl.attr("data-item-original-width", oTbl.width());
        oTbl.find('thead tr th').each(function () {
            $(this).attr("data-item-original-width", $(this).width());
        });
        oTbl.find('tbody tr:eq(0) td').each(function () {
            $(this).attr("data-item-original-width", $(this).width());
        });
        newTbl = oTbl.clone();
        oTbl.find('thead tr').remove();
        newTbl.find('tbody tr').remove();
        oTbl.parent().parent().prepend(newTbl);    
        newTbl.width(newTbl.attr('data-item-original-width'));
        newTbl.find('thead tr td').each(function () {
            $(this).width($(this).attr("data-item-original-width"));
        });
        oTbl.width(oTbl.attr('data-item-original-width'));
        oTbl.find('tbody tr:eq(0) td').each(function () {
            $(this).width($(this).attr("data-item-original-width"));
        });
    }

    $(document).ready(function () {
        scrolify($('.jtable'), 160); 
        var td = $("#BodyDiv").find('tbody tr:eq(0) td');
        var th = $("#HeaderDiv").find('thead tr th');
        for (var i = 0; i < th.length; i++) {
            $(th[i]).resizable({ handles: "e",
                resize: function (event) {
                    for (var i = 0; i < td.length; i++) {
                        $(td[i]).width($(th[i]).width());
                    }
                }
            });
        }
    });

当调用wrap()函数时,我的表的样式消失了,我使用调试器完成了这个。我选择的jtable来自jtable.org。我怎么能把jtable的风格带到我的桌子上?我在代码中需要做些什么改变......

0 个答案:

没有答案