如何实现嵌套手风琴表格的逐层级独立排序？

我太懂这种嵌套手风琴表格的排序痛点了——通用插件要么不分层级乱排，要么连子表格的内容也一起卷进来，完全不符合需求。下面给你几个针对性的解决思路，核心都是只对当前表格层级的可展开行（.view类行）及其对应的折叠内容进行排序，彻底隔离子表格：

方案一：自定义jQuery排序函数（最灵活可控） #

直接写一个针对你的表格结构的排序逻辑，把每个.view行和它紧接的.fold行绑定成一个"排序单元"，只对当前层级的这些单元操作：

// 给所有层级的表头绑定点击排序事件
$('.fold-table th').on('click', function() {
  const $currentTable = $(this).closest('.fold-table');
  const $tbody = $currentTable.find('tbody');
  const targetColumn = $(this).index();
  // 切换升降序状态
  const isAscending = !$(this).hasClass('sorted-asc');

  // 收集当前层级的所有排序单元：[view行, fold行]
  const rowUnits = [];
  $tbody.children('tr.view').each(function() {
    rowUnits.push({
      view: $(this),
      fold: $(this).next('.fold')
    });
  });

  // 执行排序：根据目标列的内容比较
  rowUnits.sort((unitA, unitB) => {
    const valA = unitA.view.find('td').eq(targetColumn).text().trim();
    const valB = unitB.view.find('td').eq(targetColumn).text().trim();

    // 处理数字类型（比如Amount列）
    if (!isNaN(valA) && !isNaN(valB)) {
      return isAscending ? (parseInt(valA) - parseInt(valB)) : (parseInt(valB) - parseInt(valA));
    }
    // 处理字符串类型（比如Company列）
    return isAscending ? valA.localeCompare(valB) : valB.localeCompare(valA);
  });

  // 保留折叠状态：排序前记录每个fold行的显示状态
  const foldStates = rowUnits.map(unit => unit.fold.css('display'));

  // 清空tbody，重新插入排序后的单元
  $tbody.empty();
  rowUnits.forEach((unit, index) => {
    $tbody.append(unit.view).append(unit.fold);
    // 恢复折叠状态
    unit.fold.css('display', foldStates[index]);
  });

  // 更新表头的排序状态样式
  $currentTable.find('th').removeClass('sorted-asc sorted-desc');
  $(this).addClass(isAscending ? 'sorted-asc' : 'sorted-desc');
});

这个方案的优势： #

• 完全隔离子表格：只操作当前点击表头所在的.fold-table，子表格的内容不会被触动
• 保留折叠状态：排序后用户之前展开/折叠的行状态不会丢失
• 适配你的结构：专门针对.view和.fold的配对关系设计，不需要修改现有HTML结构

方案二：改造jQuery Sorttable插件（如果你想继续用它） #

如果你习惯用jQuery Sorttable，可以修改它的核心逻辑，让它只识别当前层级的.view行：

1. 找到Sorttable中获取可排序行的代码（通常是类似var rows = tbody.rows的部分），把它改成：

// 只获取当前tbody下直接子元素中的.view行
var rows = $("tr.view", tbody).get();

2. 添加逻辑，让每个.view行排序后，对应的.fold行跟着移动：在排序完成后，遍历排序后的rows，把每个行的下一个.fold行插入到它后面。

这个方案适合不想完全重写排序逻辑的情况，但需要你对Sorttable的源码有一定了解。

方案三：HTML结构优化（辅助排序） #

如果可以微调HTML结构，给每个层级的排序单元加一个容器，比如用<tbody>来包裹每个.view和.fold行：

<table class="fold-table">
  <thead>...</thead>
  <tbody class="sort-unit">
    <tr class="view">...</tr>
    <tr class="fold">...</tr>
  </tbody>
  <tbody class="sort-unit">
    <tr class="view">...</tr>
    <tr class="fold">...</tr>
  </tbody>
</table>

这样不管用哪种插件，都可以直接针对.sort-unit这个层级排序，完全避免误操作子表格的内容，结构上也更清晰。

内容的提问来源于stack exchange，提问作者LucyTurtle