Vanessa

treeTable 插件有很多，但 jQuery treeTable 应该算是比较简单的，易用，简洁的一个。功能不强，但是很好扩展。而且当作一个简单的 tree 进行使用。

需要注意的是你的 table 需要按照一定的顺序进行排列：儿子必须尾随跟着父亲。

例如：

树形结构如下：

{
    "c" : "data-c",
    "b": {
        "a": "data-a"
    }
}

html 结构中 a 必须尾随 b，不能位于 c 前或 c 后：

<table>

    <tr id="c"><td>data-c</td></tr>

    <tr id="b"><td>tree-b</td></tr>

    <tr id="a" class="child-of-b"><td>data-a</td></tr>

</table>

 

为了减少数据之间的转换，采用 array 进行数据存储（与底层数据库存储一致）。

[{"id": "a", "parent": "c", "data": "data-a"},
{"id": "b", "data": "tree-b"},
{"id": "c", "data": "data-c"}]

 

这样一来，势必就必须对 array 进行重新排序。唉，可惜以前读大学的时候没有好好写代码，不知道这样对不对？

即使侥幸对了，肯定有优化的办法，o(︶︿︶)o 唉，自己的算法好弱，连初高中，大学学的各种玄，各种分，各种函数，都记不清了。枉费我当初的天份啊。苍天哪。

var sortAll = function (ids) {
        for (var k = 0; k < ids.length; k++) {
            var id = ids[k];
            var order = 0;
            var objsId = [],    // 存放当前节点儿子的 id
            childList = [];     // 存放当前节点儿子的数据
            for (var i = 0; i < treeTableData.length; i++) {
                if (treeTableData[i].id === id) {
                    order = i;
                }
            if (reeTableData[i].parent === id) {
                // 如果为其儿子，存进去吧
                objsId.push(treeTableData[i].id);
                // 把儿子删除后存于 childList
                childList.push(treeTableData.splice(i, 1)[0]);
                i--;
            } 
        }
        
        for (var n = 0; n &lt; childList.length; n++) {
            // 按照你自己想要的顺序重写排列
            childList.splice(0, 0, childList.splice(n, 1)[0]);                
        }
        
        for (var m = 0; m &lt; childList.length; m++) {
            // 把儿子放到他爸爸下面吧
            treeTableData.splice(order + 1, 0, childList[m]);
        }
        
        if (objsId.length &gt; 0) {
            // 继续到你没有儿子为止
            sortAll(objsId);
        }
    }         
};

var getRoot = function () {

var order = 0,

objsId = [];

for (var i = 0; i < treeTableData.length; i++) {

if (!treeTableData[i].parent) {

// 获取顶层节点

objsId.push(treeTableData[i].id);
            if (order !== i) {
                // 顶层节点顺序位于子节点后，进行排序
                order++;
                var obj = treeTableData.splice(i, 1)[0];
                treeTableData.splice(order, 0, obj);
            }
        }
    }
    return objsId;
}

sortAll(getRoot());

 

  help me, help you.  ^^ 

---

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！