在使用jquery.treetable時,有時我們需要重新綁定數據到樹形表格,這時我們可以使用treetable提供的rebuild方法。
$('#tree').treetable('rebuild', data);
其中tree為樹形表格的選擇器,data為重新綁定的數據,可以是一個數組或一個函數。
當重新綁定的數據為一個數組時,我們需要保證數組中的數據格式與之前綁定的數據格式一致,否則會出現重復或錯誤的節點。
var data = [
{id: 1, parentId: null, name: 'Root'},
{id: 2, parentId: 1, name: 'Node 1'},
{id: 3, parentId: 1, name: 'Node 2'}
];
$('#tree').treetable('rebuild', data);
當重新綁定的數據為一個函數時,treetable會調用該函數生成新的數據,這樣我們就可以動態地生成樹形表格。
$('#tree').treetable('rebuild', function(nodeId) {
return $.get('data.php?id=' + nodeId).then(function(data) {
return $.map(data, function(item) {
return {
id: item.id,
parentId: item.parentId,
name: item.name
}
});
});
});
在重新綁定數據后,我們還可以對樹形表格進行一些操作。
例如,重新綁定數據后,treetable會自動展開已經展開過的節點或被設置為展開狀態的節點。
$('#tree').treetable('expandNode', 1);
我們也可以自動計算樹形表格的行號。
$('#tree').treetable('column', 0).setBranchFormat(function(node, level) {
return (level >0 ? '---' : '') + node.name;
});
最后,我們需要注意的是,重新綁定數據后,treetable會自動清空之前綁定的數據。如果我們想保留之前綁定的數據,可以使用treetable的插件treetable-persist。
上一篇vue的引入方式
下一篇html的頁面跳轉代碼