treetable+ajax实现异步加载展示表格树

最近需要用表格树展示一些文件上的数据，不废话，直接贴代码：

*注意：*branchAttr 为True强制打开节点的展开图标，允许将一个没有儿子节点的节点定义为分支节点，在HTML里面以data-tt-branch 属性形式展现.

<table id="example-advanced">
        <caption>
            <a href="#" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;">Expand all</a>
            <a href="#" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">Collapse all</a>
        </caption>
        <thead>
        <tr>
            <th>Name</th>
            <th>Kind</th>
            <th>Size</th>
        </tr>
        </thead>
        <tbody>
        <tr data-tt-id='5' data-tt-branch='true'>
            <td><span class='folder'>Perl</span></td>
            <td>Folder</td>
            <td>--</td>
        </tr>
        <tr data-tt-id='5-1' data-tt-parent-id='5'>
            <td><span class='folder'>wxPerl</span></td>
            <td>Folder</td>
            <td>--</td>
        </tr>
        <tr data-tt-id='5-1-1' data-tt-parent-id='5-1'>
            <td><span class='file'>INSTALL.pod</span></td>
            <td>File</td>
            <td>8.26 KB</td>
        </tr>
        <tr data-tt-id='5-1-2' data-tt-parent-id='5-1'>
            <td><span class='file'>todo.txt</span></td>
            <td>File</td>
            <td>2.3 KB</td>
        </tr>
        <tr data-tt-id='7'>
            <td><span class='folder'>RubyCocoa</span></td>
            <td>Folder</td>
            <td>--</td>
        </tr>
        <tr data-tt-id='8'>
            <td><span class='folder'>wxWidgets</span></td>
            <td>Folder</td>
            <td>--</td>
        </tr>
        <tr data-tt-id='9'>
            <td><span class='file'>Xcode Tools License.rtf</span></td>
            <td>File</td>
            <td>18.79 KB</td>
        </tr>
        </tbody>
    </table>

js代码：

$("#example-advanced").treetable({
    expandable: true,
    onNodeExpand: function () {
        var node = this;
        var childSize = $("#treetable").find("[data-tt-parent-id='" + node.id + "']").length;
        console.log("childSize = ",childSize)
        if (childSize > 0) {
            return;
        }
        // 一下是加载后的处理逻辑
        $.post("/relation/v1/get_relation/", {csrfmiddlewaretoken: csrf_token, pid:node.id}, function (data) {
            console.log(data)
            if(data.success === true){
                for (var i=0; i<data.data.length; i++) {
                    var rows = ''
                    if ($("#" + data.data[i].tt_id).length === 0) {
                        if (data.data[i].have_child === false) {

                            rows = rows + "<tr id='" + data.data[i].tt_id + "' data-tt-id='" + data.data[i].tt_id + "' data-tt-parent-id='" +
                                data.data[i].tt_parent_id + "'><td>" + "<span class='am-icon-clone' style='padding: 0px;'><a href='/component/v1/hive_table/?db_id=" +
                                    data.data[i].db_id + "&db_name=" + data.data[i].db_name + "&tablename=" + data.data[i].tbl_name +
                                    "' target='_blank' style='color: #337ab7;'> " + data.data[i].tbl_name + "</a></span></td> <td>" +
                                data.data[i].db_name + "</td></tr>"
                        } else {
                            // 判断是否重复
                            if ($("#" + data.data[i].tt_id).length === 0) {
                                rows = rows + "<tr  data-tt-branch='true' id='" + data.data[i].tt_id + "' data-tt-id='" +
                                    data.data[i].tt_id + "' data-tt-parent-id='" + data.data[i].tt_parent_id + "'><td>" +
                                    "<span class='am-icon-gg' style='padding: 0px;'><a href='/component/v1/hive_table/?db_id=" +
                                    data.data[i].db_id + "&db_name=" + data.data[i].db_name + "&tablename=" + data.data[i].tbl_name +
                                    "' target='_blank'> " + data.data[i].tbl_name + "</a></span></td> <td>" + data.data[i].db_name + "</td></tr>"
                            }
                        }
                        $("#ke_table").treetable("loadBranch", node, rows);// 插入子节点
                        $("#ke_table").treetable("expandNode", node.id);// 展开子节点

                    }
                }
            }else{
                layer.alert(data.msg,{"icon":6})
            }
        },'json')
    }
});