官網(wǎng)：http://www.treejs.cn/v3/main.php
1.引入所需文件
import 'static/plugins/ztree/metroStyle/metroStyle.css' // 將 zTree 的 css 目錄 復(fù)制到項目目錄內(nèi),并引入
import 'static/plugins/ztree/js/jquery-1.4.4.min' // jquery-1.4.4.min.js 復(fù)制到項目目錄內(nèi),并引入
import 'static/plugins/ztree/js/jquery.ztree.core.min' // jquery.ztree.core 是 zTree 的核心庫
import 'static/plugins/ztree/js/jquery.ztree.excheck.min' // jquery.ztree.excheck 是 zTree 關(guān)于 復(fù)選框/單選框 的擴展庫
import 'static/plugins/ztree/js/jquery.ztree.exhide.min' // jquery.ztree.exhide 是 zTree 關(guān)于 節(jié)點隱藏 的擴展庫
import 'static/plugins/ztree/js/jquery.ztree.exedit .min'// jquery.ztree.exedit 是 zTree 關(guān)于 編輯操作的擴展庫
jquery.ztree.all // jquery.ztree.all 是 core + excheck + exedit 的組合（不包含 exhide）
使用 zTree 提供的不同 屬性/方法 時谐岁，請務(wù)必檢查該 屬性/方法 是否存在于你加載的 zTree 庫內(nèi)总棵？
2.創(chuàng)建zTree 容器
<ul id="treeId" class="ztree"></ul>
3.初始化 zTree
var zTreeObj;
var setting = {}; // zTree 的參數(shù)配置
var zNodes = [ // zTree 的數(shù)據(jù)屬性
{name:"test1", open:true, children:[ // open:展開丸相，默認關(guān)閉
{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
]
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
4 數(shù)據(jù)格式（JSON）
- zTree 支持的是 Object 對象拌蜘，不是 String
- 可以隨意添加任意的自定義屬性粒督，用于傳遞各種數(shù)據(jù)陪竿。但一定注意，不要與 API 中 treeNode 的屬性產(chǎn)生沖突
- 對于 setting.data.key 替換的屬性，一旦設(shè)定族跛， 整棵樹所有的節(jié)點都要滿足此規(guī)則
4.1標準數(shù)據(jù)結(jié)構(gòu)
但是后端生成這種數(shù)據(jù)時闰挡，會比較繁瑣，所以 zTree 為了減少用戶的麻煩礁哄， 還支持類似數(shù)據(jù)表的單層結(jié)構(gòu)长酗。
4.2簡單數(shù)據(jù)結(jié)構(gòu)
- setting.data.simpleData.enable = true
- id、pId 可以替換：setting.data.simpleData.idKey
- 根節(jié)點 的 pId 值默認為 null桐绒，如果不想設(shè)置為 null夺脾，可以設(shè)置：setting.data.simpleData.rootPId
image.png - 一旦開啟 簡單數(shù)據(jù)模式，拖拽節(jié)點后茉继，zTree 會自動修正節(jié)點的 pId 值
