js实现treetable多行选择，多行排序

实现 treetable 的多行选择和多行排序可以使用 JavaScript。下面是具体的代码实现：

多行选择：

<!-- HTML -->
<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>大小</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td>文件夹1</td>
      <td></td>
    </tr>
    <tr data-id="2" data-parent="1">
      <td>文件1</td>
      <td>2KB</td>
    </tr>
    <tr data-id="3" data-parent="1">
      <td>文件2</td>
      <td>3KB</td>
    </tr>
    <tr data-id="4">
      <td>文件夹2</td>
      <td></td>
    </tr>
    <tr data-id="5" data-parent="4">
      <td>文件3</td>
      <td>4KB</td>
    </tr>
  </tbody>
</table>

// JavaScript
const table = document.getElementById("myTable");
let selectedRows = [];

table.addEventListener("click", function(event) {
  const target = event.target;
  const row = target.closest("tr");
  
  if (row && row.dataset.id) {
    if (selectedRows.includes(row)) {
      // 已经选中，取消选择
      selectedRows = selectedRows.filter(r => r !== row);
      row.classList.remove("selected");
    } else {
      // 未选中，添加选择
      selectedRows.push(row);
      row.classList.add("selected");
    }
    
    // 处理子节点
    const childRows = table.querySelectorAll(`tr[data-parent="${row.dataset.id}"]`);
    childRows.forEach(childRow => {
      if (selectedRows.includes(row)) {
        // 已经选中，不处理
      } else {
        // 未选中，与父节点同步
        selectedRows.push(childRow);
        childRow.classList.add("selected");
      }
    });
  }
});

多行排序：

<!-- HTML -->
<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>大小</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td>文件夹1</td>
      <td></td>
    </tr>
    <tr data-id="2" data-parent="1">
      <td>文件1</td>
      <td>2KB</td>
    </tr>
    <tr data-id="3" data-parent="1">
      <td>文件2</td>
      <td>3KB</td>
    </tr>
    <tr data-id="4">
      <td>文件夹2</td>
      <td></td>
    </tr>
    <tr data-id="5" data-parent="4">
      <td>文件3</td>
      <td>4KB</td>
    </tr>
  </tbody>
</table>

// JavaScript
const table = document.getElementById("myTable");

table.addEventListener("click", function(event) {
  const target = event.target;
  const th = target.closest("th");
  
  if (th) {
    const columnIndex = [...th.parentNode.children].indexOf(th);
    const rows = [...table.querySelectorAll("tr")];
    
    rows.sort((a, b) => {
      const aValue = a.cells[columnIndex].textContent;
      const bValue = b.cells[columnIndex].textContent;
      
      if (isNaN(aValue) || isNaN(bValue)) {
        return aValue.localeCompare(bValue);
      } else {
        return aValue - bValue;
      }
    });
    
    rows.forEach(row => {
      const parentRow = table.querySelector(`tr[data-id="${row.dataset.parent}"]`);
      
      if (parentRow) {
        // 子节点
        const parentNode = parentRow.querySelector("td:first-child");
        const indentation = document.createElement("span");
        indentation.className = "indentation";
        parentNode.insertBefore(indentation, parentNode.firstChild);
        row.classList.add("child-row");
      } else {
        // 父节点
        const indentation = row.querySelector(".indentation");
        
        if (indentation) {
          indentation.remove();
        }
        
        row.classList.remove("child-row");
      }
      
      row.parentNode.appendChild(row);
    });
  }
});

以上代码分别实现了 treetable 的多行选择和多行排序功能。其中，多行选择通过监听 table 的 click 事件，并通过 selectedRows 数组来记录选中的行。多行排序则通过监听 table 的 click 事件，并通过 sort() 方法和 localeCompare() 方法对所有行进行排序，并对子节点进行缩进处理。