在treegrid html上添加列排序功能

Question

我有一个这样构建的树形网格：

<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>

然后添加以下 sn-p 它将把你的表变成一个很棒的表。

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

干杯！