排序表

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]); 
    } 

}