入門—最簡單的樹（使用json資料）
阿新 • • 發佈：2018-11-19
1.<!DOCTYPE html>是必須的。
2.zTree 的容器 className 別忘了設定為 "ztree"。
使用ztree建立樹，首先要引用ztree相關css和js檔案，因為ztree是基於jquery的，所以juqery的js檔案必須引入。
<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="../js/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.core.min.js"></script>
使用ztree必須建立一個容器，如第2關注點一樣。
<ul id="demoTree" class="ztree"></ul>
js中配置如下：
1.定義一個變數：var zTreeObj; （zTreeObj是樹的一個物件，便於對樹進行操作）。
2.定義json資料 ztree的節點資料 ：var zNodes = [{id:1, pId:0, name: "父節點1"},{id:11, pId:1, name: "子節點1"},{id:12, pId:1, name: "子節點2"}];
預設展開的節點，可以設定treeNode.open屬性；無子節點的父節點，設定treeNode.isParent屬性。
3.使用簡單的json資料必須設定setting.data.simpleData相關屬性（兩個key值的value可自由定義對應json即可）
var setting = { data : { simpleData : {enable:true,idKey:"id",pIdKey:"pId",rootPId:null } } };
4.最後進行樹的初始化，即可展現樹並對樹進行操作：zTreeObj = $.fn.zTree.init($("#demoTree"), setting, zNodes);
當與後臺進行互動時，就可以用ajax獲取返回的json資料並進行樹的初始化。
$.ajax({
url : " ",
data : {
pid : pid,
},
success : function(res) {
zTreeObj = $.fn.zTree.init($("#demoTree"), setting, res);
var nodes = zTreeObj.getNodes()
if (nodes.length > 0) {
// 預設選中第一個節點
zTreeObj.selectNode(nodes[0]);
showTable(nodes[0].id);
selectNode = nodes[0].id;
}
}
});