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')
    }
});