角度固定表标题毛刺

Question

这是我之前的帖子found here的延续。

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

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

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

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

编辑1： 根据Code Wizard的建议，我从演示中获取了工作代码并将其放入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路线，我大部分时间都在工作。唯一的问题是列略有错位。主要问题是列宽不是动态的。 Here's a plunker重现我的问题。如您所见，第一行的第一列内容溢出到相邻列中。我希望列是动态的并且对齐

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引擎设置的默认宽度。

我建议做什么来修复它是加载表并且只加载 After （为了确保在加载表之后调用该函数）是使用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();
        }
    }
);

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

祝你好运。

Answer 2

尝试添加一些CSS屁股。 请查看此修改后的CodePan -

[CopePan here] 

CodePan for fixed Header & Footer

Answer 3

您是否尝试在表格中添加width:100%;和tr？

table,tr {
    width:100%;
}

Demo here

Answer 4

您的问题大多已修复，我认为您只需要应用CSS中的修补程序即可完成。我们如何包装第一列：

table tr th:first-child, table tr td:first-child{
  word-wrap: break-word;
  white-space: inherit!important;
}

Preview on Plunker

您表中的TD已经响应，我们只需要通过在您认为会发生的每个th，td中应用换行来修改内容不会溢出。

上面的代码我将它应用于第一个孩子，但你可以自定义整个表。