让 jQuery tablesorter 处理隐藏/分组的表行

Question

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

问题是表排序器没有将扩展的子记录保留在父记录旁边。 它将它们排序，就好像它们是顶级的一样。 因此，每次表按列排序时，子行最终都会出现在各处，而不是我想要的位置。

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

Answer 1

如果你想保留tablesorter，我有一个用于此目的的mod 在此处可用

包含它后，您可以使第二个（可扩展子）行具有“expand-child”类，并且表排序器将知道将该行与其父行（前一行）配对。

Answer 2

实际上，@AdamBellaire 提到的 tablesorter 的 mod 已添加到 tablesorter v2.0.5。 我已经记录了如何使用ccsChildRow<我的博客上的 /code> 选项。

另外，如果您有兴趣，我在 tablesorter 分支 ://github.com/Mottie/tablesorter" rel="noreferrer">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

我能够通过将 child rel 属性分配给孩子并将parent 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);
    });
})