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进行排序，但我希望对Node A和Node B进行排序， NOT 对所有子行进行排序，即，如果排序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，或使用其他的libs，赞赏！

Answer 1

如果您检查this link here，则会说明以下内容（对于tablesorter 2.15.12+，您使用的是2.25.4）：

子行的父项现在有一个tablesorter-hasChildRow类名加入。

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

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

Updated JSFiddle Here

Answer 2

在vanilla JS中，您可以在行的集合上编写排序函数。对于我的特定解决方案，您还必须为id="A-parent"形式的父行添加一个ID：

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

JS：

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

}

对子行进行排序

2 个答案: