Question

这个问题已被问了很多时间，我尝试了很多堆栈溢出的解决方案，包括下面提到的一些 question-1，question-2 但是当表格宽度是动态的时候它们似乎都不起作用，元素行也是如此。

我的表结构使用另一个jquery插件jqueryTreeTable插件。和结构有点复杂。它看起来像this，我需要的是将它的标题固定在滚动水平并且为水平滚动固定的列可能有水平滚动条。

Answer 1

用于处理表的有用jQuery插件（包含可调整大小的列和固定标题）

Answer 2

我在互联网上找到了这个解决方案，但我找不到我找到的参考，我不得不做出一些改变。请参阅以下代码中的注释，了解我添加的更改。这适用于浮动标题部分。

           $("table.tableWith-FloatingHeader").each(function() {
                $(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>");

                var originalHeaderRow = $("thead", this);
                originalHeaderRow.before(originalHeaderRow.clone());
                var clonedHeaderRow = $("thead", this);

                clonedHeaderRow.addClass("tableFloatingHeader");

                originalHeaderRow.addClass("tableFloatingHeaderOriginal");
                if(originalHeaderRow.hasClass("tableFloatingHeader")){
                    originalHeaderRow.removeClass("tableFloatingHeader");
                }

                clonedHeaderRow = $('.tableFloatingHeader');
                clonedHeaderRow.css("position", "absolute");
                clonedHeaderRow.css("top", "0px");
                clonedHeaderRow.css("left", $(this).css("margin-left"));
                // originally visibility hidden only was used but it didn't work for me so I had to use display:none
                clonedHeaderRow.css("visibility", "hidden");
                clonedHeaderRow.css("display", "none");

                var tableBody = $('tbody', this);
                tableBody.css('display', 'table');


            });


            UpdateTableHeaders();
            $(window).scroll(UpdateTableHeaders);
            $(window).resize(UpdateTableHeaders);


            // since my table's width could be changing on click to the td (expand/collapse of td leads to change in width so to fix the width for the head and body UpdateTableHeader function is called.
            $("table.tableWith-FloatingHeader").undelegate("td", "click");
            $("table.tableWith-FloatingHeader").delegate("td", "click", function() {
                UpdateTableHeaders();
            });


// functions **



// function to fix the table head's width and it's visibility
    function UpdateTableHeaders() {
        $("div.divTableWithFloatingHeader").each(function() {
            var originalHeaderRow = $(".tableFloatingHeaderOriginal", this);
            var floatingHeaderRow = $(".tableFloatingHeader", this);
            var offset = $(this).offset();
            var scrollTop = $(window).scrollTop();
            if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
                floatingHeaderRow.css("visibility", "visible");
                floatingHeaderRow.css("display", "block");
                floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");
                if(!floatingHeaderRow.hasClass('visible'))
                    floatingHeaderRow.addClass('visible');
                originalHeaderRow.css("visibility", "hidden");
                originalHeaderRow.css("display", "none");

                // Copy cell widths from original header
                $("th", floatingHeaderRow).each(function(index) {
                    var cellWidth = $("th", originalHeaderRow).eq(index).css('width');
                    $(this).css('width', cellWidth);
                });

                // Copy row width from whole table
                floatingHeaderRow.css("width", $(this).css("width"));
            }
            else {
                originalHeaderRow.css("visibility", "visible");
                originalHeaderRow.css("display", "block");
                floatingHeaderRow.css("visibility", "hidden");
                floatingHeaderRow.css("display", "none");
                floatingHeaderRow.removeClass('visible');
                floatingHeaderRow.css("top", "0px");
            }
// since my problem was when I cloned the original head and hide it, it  wasn't able to sync with the change in width of the table body. I had to sync the width of the each of the tbodys tds with theads tds. 
            updateHeaderWidth();
        });
    }

// function to sync width for the table head with table body. 
    function updateHeaderWidth() {


        $("div.divTableWithFloatingHeader").each(function() {

            var table = $(this);
            var widths = [];
            var i = 0;

           // iterate through each of the tbodys first trs tds to get their width
            table.find('tbody .first-row td div.width-set').each(function(){

                widths[i] = $(this).width();
                i ++;
            });

           // iterate through theads ths add an element with the same width to both first tds and ths
           // note: step to add element to both the element is required else it would go a little out of sync
            table.find('thead.tableFloatingHeaderOriginal th.width-get, thead.tableFloatingHeader th.width-get').each(function(){

                i = $(this).attr('data-col-number');
                var width = widths[i];
                var widthKeeperTag = '<div style="width: ' + width + 'px; height: 1px;"></div>';
                if($(this).find('div').length){
                    $(this).find('div').replaceWith($(widthKeeperTag));
                }else{
                    $(this).html($(this).html() + widthKeeperTag);
                }
            });
        });
    }

Jquery固定标题和表的固定列，单元格的宽度可能会有所不同

2 个答案: