排序表

Question

我知道这可能会非常棘手，但我一直在努力了，没有运气的解决方案，所以我有扩张/可折叠行/儿童行的表：

Col1   Col2 Col3 
Node A   A  A 
    --A child 1 A1  A1 
    --A child 2 Foo  Bar 
Node B   Foo  Bar 
    --B child 1 B1  B1 
    --B child 2 Foo  Bar 

因此，尽管所有儿童行得到了扩大，我整理Col1中，我期待排序节点A和节点B，不排序所有的子行，即如果某种Col1中，我看到：

Col1   Col2 Col3 
Node B   Foo  Bar 
    --B child 1 B1  B1 
    --B child 2 Foo  Bar 
Node A   A  A 
    --A child 1 A1  A1 
    --A child 2 Foo  Bar 

不是这个....：

Col1   Col2 Col3 
    --B child 1 B1  B1 
    --B child 2 Foo  Bar 
    --A child 1 A1  A1 
    --A child 2 Foo  Bar 
Node B   Foo  Bar 
Node A   A  A 

我的代码位于：https://jsfiddle.net/wayneye/tyxykyf3/，我用jquery table sorter，但不限制，只要使用它作为我的要求满足：排序父行，而不是儿童行

敬请给我一只手，你可以改变我的HTML结构/ js，或者使用其他库，赞赏！

Answer 1

，它指出了以下（对于tablesorter 2.15.12+，而您使用的是2.25.4）：

子行的父母现在有一个tablesorter-hasChildRow类名称 补充。

如果您看一下该页面上的示例，您还将注意到有子类行tablesorter-childRow的类。

您只需将tablesorter-hasChildRow添加到您的父行中，将tablesorter-childRow添加到您的子行中。

Updated JSFiddle Here

Answer 2

在vanilla JS中，您可以在行的集合上编写一个排序函数。你还不得不一个ID添加到窗体id="A-parent"的父行对我的特殊解决方案：

小提琴：https://jsfiddle.net/vcbq843o/2/

JS：如果检查this link here

var sortTable = function (ascending) { 
    var tableBody = document.querySelector('#tb > tbody'); 
    //Get the rows as a native js array. 
    var rows = Array.prototype.slice.call(tableBody.querySelectorAll('tr')); 
    //Native js sort function. 
    rows.sort(function(first,second){ 
    //The difference between char codes lets us sort alphabetically. 
    //If they have the same code, they will be left in the same order. 
    //This means that the children will still be in the same relative position. 
    var posFirst = first.id.charCodeAt(0); 
    var posSecond = second.id.charCodeAt(0); 
    //Subtract, based on whether we want ascending or descending. 
    return ascending ? posSecond - posFirst : posFirst - posSecond; 
    }); 

    //Add the rows back to the table in our new order. 
    for(var i=0; i<rows.length; i++) { 
     tableBody.appendChild(rows[i]); 
    } 

}