最近需要用表格树展示一些文件上的数据,不废话,直接贴代码:
*注意:*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')
}
});