在treegrid html上添加列排序功能

Question

我有一个像这样构建的treegrid：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr class="treegrid-0">
            <th>name2</th>
            <th>type2</th>
            <th>Number2</th>
        </tr>
        <tr class="treegrid-1">
            <th>name1</th>
            <th>type1</th>
            <th>Number1</th>
        </tr>
        <tr class="treegrid-2 treegrid-parent-1" style="display:none;">
            <th>name1-A</th>
            <th>type1-A</th>
            <th>Number1-A</th>
        </tr>
        <tr class="treegrid-3 treegrid-parent-1" style="display:none;">
            <th>name1-B</th>
            <th>type1-B</th>
            <th>Number1-B</th>
        </tr>
        <tr class="treegrid-4">
            <th>name0</th>
            <th>type0</th>
            <th>Number0</th>
        </tr>
    </tbody>
</table>

当我单击一列时，我想添加排序选项。排序选项只能在顶层父级上执行。它是一个树网格，所以预期的行为是，如果父节点必须移动，子节点也必须与父节点一起移动。

我如何使用JS做到这一点呢？

Answer 1

您可以使用令人惊叹的js/jQuery库: datatables：https://datatables.net/，而不是自己做所有繁重的工作

在定义表之后，给它一个ID

<table id = "myTable">..</table>

然后添加下面的代码片段，它将把你的表格转换成一个很棒的表格。

$(document).ready(function(){
    $('#myTable').DataTable();
});

干杯!