Question

我有可扩展和可折叠记录的经典表格，如果展开则显示多个子记录（作为同一父表中的新记录，而不是一些子div /子表）。我也在使用tableorter并且非常喜欢它。

问题是tablesorter没有在父记录旁边保留扩展子记录。它将它们分类为顶级。因此，每当表按列排序时，子行最终会遍布整个地方而不是我想要的位置。

有没有人知道对tablesorter或特定配置的良好扩展，使tableorter即使在排序后也能将子行与父行组合在一起？或者我是否必须放弃tableorter以支持其他API或者开始编写我自己的小部件的丑陋过程？我应该避免使用基于CSS的方法来隐藏表的各行来表示折叠行吗？

Answer 1

如果你想保留tablesorter，我有一个mod用于此目的 available here

在包含它之后，你让你的第二个（可扩展子）行具有类“expand-child”，并且tablesorter将知道将该行与其父（前一行）保持配对。

Answer 2

实际上，@ AdamBellaire提到的mod of tablesorter已添加到tablesorter v2.0.5。我在我的博客上记录了how to use the ccsChildRow option。

此外，如果您有兴趣，我fork of tablesorter github有很多增强功能和有用的小部件：）

Answer 3

丑陋的修复而不是使用上面涉及为父行和子行指定parentId css类和childId css类，然后使用窗口小部件重新调整。以防万一其他人遇到这个问题。它显然不是最好的代码，但它对我有用！

$("tbody tr[class^='parent']", table).each(function() {
 $(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});

Answer 4

我能够通过将子级rel属性分配给子级并将父级rel属性分配给父级来克服这一问题。然后，我从头开始遍历表格，并隐藏所有子项，并在排序完成后重新添加它们。我还使用切换功能来显示子代。这是我的解决方案：

<div key={page}>
  <PdfRenderer
    pdfDocument={this.state.pdfDocument}
    currentPage={page}
    scale={currentScale}
  />
</div>

获取jQuery tablesorter以使用隐藏/分组表行

4 个答案: