角度固定表头部毛刺

Question

这是我之前发现的帖子的延续.

固定的标题工作正常但我在初始加载时遇到问题.
当表首次加载时,它看起来像这样:

但是,一旦我点击列头以按照该值对其进行排序,所有内容都会卡入到位并最终看起来像这样:

就像我在上一篇文章中所说,我正在使用anguFixedHeaderTable插件.标题很好但我只是遇到了这个故障.我可以提供有关我在此项目中使用的所有资源的详细信息,如果这有助于调试问题.我可以提供更多信息,但我不知道在这一点上提供什么.

此外,当我单击列对列表进行排序时,表格会闪烁,因为它会在使用滚动条返回到300px的高度之前扩展为完整大小.如果我点击它几次,它就会排序而不会有任何表格闪烁.如果我单击一个新的列标题进行排序,它会再次闪烁一次,但再点击几次相同的标题会产生顺畅和干净的排序.知道造成这种闪烁的原因是什么吗？

编辑1: 根据代码向导的建议,我从演示中获取了工作代码并将其放入github .js文件中.这就是我现在拥有的:

function tableDataLoaded() {
    // first cell in the tbody exists when data is loaded but doesn't have a width
    // until after the table is transformed
    return $elem.find("tbody").is(':visible');
    /*var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
    return firstCell && !firstCell.style.width;*/
}

这实际上在首次加载时非常有效.唯一的问题是我有两个表,用户可以通过单击按钮切换.这些表由一个简单的ng-show表达式控制,以检测用户选择的视图.因此,当表首次加载时,外观与两个视图中的外观完全相同.但是如果你不停地来回切换,那么专栏就会再次搞砸了.在您单击列进行排序之前,它会快速回到原位.

编辑2: 我试过去css路线,我大部分时间都在工作.唯一的问题是列略有错位.主要问题是列宽不是动态的.这是一个重现我的问题的傻瓜.如您所见,第一行的第一列内容溢出到相邻列中.我希望列是动态的和对齐的

Answer 1

由于我没有您的代码，我只能尝试指出一些可能导致此问题的问题来帮助您。

当 HTML 引擎渲染表格时，它必须遍历所有单元格并计算每个单元格的最大宽度，以便找到每个表格列的最大宽度。

使用anguFixedHeaderTable此代码：

function tableDataLoaded() {
    // first cell in the tbody exists when data is loaded but doesn't have a width
    // until after the table is transformed
    var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
    return firstCell && !firstCell.style.width;
    }

这个函数在这里被触发：

// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
    if (isTableDataLoaded) {
        transformTable();
        }
    });

如果执行此代码时表格尚未加载，表格将“固定”其宽度，并将使用 HTML 引擎为其设置的默认宽度。

为了修复它，我建议做的是加载表，并且仅在加载后（以确保在加载表后调用该函数）使用java脚本代码，该代码会将指令附加到表中重写此模块来解决此问题。

使用代码并尝试解决问题后进行更新。

Note

演示网站上的代码与 GitHub 中的代码不同

演示代码： - http://pointblankdevelopment.com.au/plnks/angularjs-fixed-header-scrollable-table-directive/app.js

GitHub 代码 - https://github.com/cornflourblue/angu-fixed-header-table/blob/master/angu-fixed-header-table.js

区别在于：

 # The working code in the demo
 $scope.$watch(function () { return $elem.find("tbody").is(':visible') },


# The "buggy" code on git hub
// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded, 
    function(isTableDataLoaded) {
        if (isTableDataLoaded) {
            transformTable();
        }
    }
);

从演示中获取代码，它将按预期工作。

祝你好运。