文章轉至：https://blog.csdn.net/feng_zi_ye/article/details/80632671
感謝作者的無私分享！
開發老手可以跳過該教程直接去http://www.treejs.cn/v3/api.php官網看教程
一、首先獲得zTree，並加入到項目中
二、在html導入資源文件
注：zTree依賴於jQuery1.4+，這里用的v1.9
<link href="js/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
<script src="js/jquery.min.js" type="application/javascript"></script>
<script src="js/zTree_v3-master/js/jquery.ztree.all.min.js"></script>
三、在html中定義一個zTree的容器
<body>
<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</body>
四、編寫js代碼生成zTree
$(function(){
var setting={
check: {
enable: true,
chkStyle: "checkbox"//顯示 checkbox 選擇框，默認checkbox可選擇值radio
}
};
var zTreeNodes=[
{"name":"北京","open":true,children:[
{"name":"東城區"},
{"name":"朝陽區"}
]},//open:true表示默認展開
{"name":"重慶","open":true,children:[
{"name":"巴南區",children:[
{"name":"南泉"},
{"name":"界石"}
]},
{"name":"渝中區"}
]}
];
var city = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
//第一個參數為zTree的DOM容器，第二個為zTree設置詳情可見官網api,第三個為zTree的節點數據
});
運行效果如下：
五、給節點添加事件
在setting里面配置callback，添加onCheck事件的回調函數,這里演示一個就行了，更多看官網。
var setting={
check: {
enable: true,
chkStyle: "checkbox"//顯示 checkbox 選擇框，默認checkbox可選擇值radio
},
callback:{
onCheck:zTreeOnCheck
}
};
var city = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.name);//彈出城市名字
}
運行效果如下：
六、異步獲取數據（在實際項目中適用）
var setting={
check: {
enable: true,
chkStyle: "checkbox"//顯示 checkbox 選擇框，默認checkbox可選擇值radio
},
callback:{
onCheck:zTreeOnCheck
},
async: {
enable: true,//要開啟async功能必須設置為true,其他地方同理
dataType: "json",
type: "get",
url: "city.json"
},
data: {
simpleData: {
enable: true,
idKey: "id",//節點id名
pIdKey: "pid",//父節點id名
rootPId: 0//默認根節點為0
}
}
};
var zTreeNodes=[];
var city = $.fn.zTree.init($("#tree"),setting, zTreeNodes);
然后，在city.json文件中添加城市的簡單json數據(與上面的json數據有所區別，這里不再有子節點children，需要設置該節點的父節點pid,根節點pid為0。)
注：json文件中id以及pid要與setting中simpleData配置的idKey和pIdKey一致，小心有坑！
[
{"name":"北京","open":true,"id":1,"pid":0},
{"name":"東城區","id":11,"pid":1},
{"name":"朝陽區","id":12,"pid":1},
{"name":"重慶","open":true,"id":2,"pid":0},
{"name":"巴南區","open":true,"id":21,"pid":2},
{"name":"南泉","id":211,"pid":21},
{"name":"界石","id":212,"pid":21},
{"name":"渝中區","id":22,"pid":2}
]
————————————————
版權聲明：本文為CSDN博主「feng_zi_ye」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/feng_zi_ye/article/details/80632671