首先,在適配目錄樹時,使用checkbox形式,配置代碼如下:
var settingCatalog = {
check:{
enable: true
},
data:{
simpleData:{
enable: true
}
}
}
看下效果:

這時的每個節點都處於一個可選的狀態(但都未選中),但在實際項目中我們可能還會遇到另外兩種情況:
1、根據后台返回的json,選中指定節點(此時所有的節點仍處於可編輯的狀態);

代碼如下:
var treeObj = $.fn.zTree.getZtreeObj("categoryTree"); for(var j = 0; j < zNodes.length; j++){ treeObj.checkNode(treeObj.getNodeByParam("id",zNodes[j].id),true); }
zNodes是后台獲取的json數據,其中包括 id、parentId、name、deep,形式如下:

2、根據json,選中指定節點,所有節點為不可操作狀態。
代碼如下:
/**獲取樹對象*/ var treeObj = $.fn.zTree.getZTreeObj("categoryTree"); /**獲取所有節點*/ var nodes = treeObj.transformToArray(treeObj.getNodes()); for(var i = 0; i < nodes.length; i++){ for(var j = 0; j < zNodes.length; j++){ if(nodes[i] === treeObj.getNodeByParam("id",zNodes[j].dataAuthorityId)){ treeObj.checkNode(treeObj.getNodeByParam("id",zNodes[j].dataAuthorityId),true); } } nodes[i].chkDisabled = true; }
效果:

Tips:
實際項目中,有時需要把選中的節點以json的形式傳給后台,既然要獲取節點,那當然要從節點下手啦:
var json = []; var treeObj=$.fn.zTree.getZTreeObj("categoryTree"); var nodes=treeObj.getCheckedNodes(true); for(var i = 0; i < nodes.length; i++){ var obj = {}; obj.dataAuthorityId = nodes[i].id; obj.parentId = nodes[i].pId; obj.name = nodes[i].name; obj.deep = nodes[i].deep; json.push(obj); } json = JSON.stringfy(json); //要作為參數傳給后台,別忘了序列化一下
看看我們得到了什么:
[{"dataAuthorityId":"00","parentId":null,"name":"京師目錄體系","deep":"0"},{"dataAuthorityId":"gaozhong","parentId":"00","name":"高中","deep":"1"},{"dataAuthorityId":"gaozhong-shuxue","parentId":"gaozhong","name":"數學","deep":"2"},{"dataAuthorityId":"xiaoxue","parentId":"00","name":"小學","deep":"1"},{"dataAuthorityId":"xiaoxue-shuxue","parentId":"xiaoxue","name":"數學","deep":"2"},{"dataAuthorityId":"xiaoxue-yingyu","parentId":"xiaoxue","name":"英語","deep":"2"}]
水平有限,歡迎批評指正!
