角度固定表头故障

Posted 2023-02-19

【中文标题】角度固定表头故障

【英文标题】：Angular Fixed Table Header Glitch

【发布时间】：2016-08-11 19:53:10

【问题描述】：

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

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

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

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

另外，当我单击列对列表进行排序时，表格会闪烁，因为它会扩展为完整大小，然后返回到 300 像素的高度并带有滚动条。如果我再点击几次，它会排序而不会出现任何表格闪烁。如果我单击一个新的列标题进行排序，它会再次闪烁一次，但再单击几次相同的标题会产生平滑和干净的排序。知道是什么导致了这种闪烁吗？

编辑 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 重现我的问题。如您所见，第一行的第一列内容溢出到相邻列中。我希望列是动态且对齐的

【问题讨论】：

你的方向不对；尝试为我们提供一些 code 而不是赏金。

你能解释一下tbody中flex: 1 1 auto;的原因吗？

作为对编辑 2 的评论：移位是因为滚动条占用了 tbody 中的空间，导致 flex 的空间更小

编辑 2：***.com/a/17380697/976596

看起来您从根本上破坏了整个表格流程。首先，您将<tr> 用作table。什么是排行？ display: table-row; 有助于 display: table-cell; 元素根据需要实际增加宽度。如果没有正确设置 display: table-row; 的父元素，单元格将无法以这种方式运行。

【参考方案1】：

尝试添加这个 CSS：

.table 
  width: 100%;
  height: 200px;

请查看此修改后的 CodePen：CodePen for fixed Header & Footer

【讨论】：

这是另一个使用 angularJs 进行绑定和 css 进行样式设置的固定页眉和页脚表。我没有使用 AngularJS 的固定头滚动表指令。但它会解决问题，我敢肯定。 CodePan for Table

这是代码笔不是“CodePan”：p

【参考方案2】：

您的问题已基本解决，我认为您只需要应用 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 中应用换行来使内容不会溢出。

上面的代码我把它应用到了第一个孩子，但是你可以自定义整个表格。

【参考方案3】：

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

table,tr 
    width:100%;

Demo here

【参考方案4】：

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

当 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();
        
    
);

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

祝你好运。

【讨论】：

能否请您发布一个演示代码。所以我可以帮助你。

我决定让事情变得简单，走 css 路线。不过仍然有问题，我编辑了我的帖子以显示演示。关于可能的解决方案的任何想法？