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

StackOverflow https://stackoverflow.com/questions/218911

  •  03-07-2019
  •  | 
  •  

题

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

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

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

有帮助吗？

解决方案

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

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

其他提示

实际上，添加了@AdamBellaire提到的 modort of tablesorter tablesorter v2.0.5 。我已经记录了如何使用 ccsChildRow 选项在我的博客上。

另外，如果您有兴趣，我在 fork of tablesorter =“https://github.com/Mottie/tablesorter”rel =“noreferrer”> github ，它有很多增强功能和有用的小部件：）

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

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

我能够通过将子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);
    });
})
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top