12

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

问题是 tablesorter 没有在父记录旁边保留扩展的子记录。它对它们进行排序，就好像它们是顶级的一样。因此，每次表格按列排序时，子行最终都会遍布整个地方，而不是我想要的地方。

有谁知道 tablesorter 的一个很好的扩展或特定配置，即使在排序之后，tablesorter 也可以将子行与父行分组在一起？还是我必须放弃 tablesorter 以支持其他一些 API，或者开始编写自己的小部件的丑陋过程？我是否应该避免使用基于 css 的方法来隐藏表格的单个行来表示折叠行？

4

4 回答 4

17

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

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

于 2008-10-21T14:23:51.650 回答
11

实际上， @AdamBellare 提到的 tablesorter模块已添加到tablesorter v2.0.5中。我已经在我的博客上记录了如何使用该ccsChildRow选项。

另外，如果您有兴趣，我在github上有一个tablesorter 的分支，它有很多增强功能和有用的小部件:)

于 2012-10-02T12:28:58.837 回答
1

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

$("tbody tr[class^='parent']", table).each(function() {
 $(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});
于 2008-10-21T16:41:53.540 回答
0

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

function lfDisplayProductInformation(id){

    if($(`[rel="child-${id}"]`).attr("hidden") === 'hidden'){
        $(`[rel="child-${id}"]`).removeAttr('hidden')
    }
    else if(!$(`[rel="child-${id}`).attr("hidden")){
        $(`[rel="child-${id}"]`).attr("hidden", true)
    }

}

$(".tablesort")
.tablesorter({
  theme: 'blue',
  showProcessing : true
})

// assign the sortStart event
.bind("sortStart",function(e, t) {
    $("tr[rel^='parent']").each(function() {
            var parentRow = $(this); 
            var tag = (parentRow.attr('rel')).split("-")[1];
            var childRow = $(`tr[rel="child-${tag}"]`)
            if(!childRow.attr("hidden")){
                childRow.attr("hidden", true)
            }
    });

})

.bind("sortEnd",function(e, t) {
    $("tr[rel^='parent']").each(function() {
            var parentRow = $(this); 
            var tag = (parentRow.attr('rel')).split("-")[1];
            var childRow = $(`tr[rel="child-${tag}"]`)
            childRow
            parentRow.after(childRow);
    });
})
于 2019-05-13T16:01:01.190 回答