zTree -- jQuery 樹插件 使用小結

zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點

zTree主頁：http://www.ztree.me/v3/main.php#_zTreeInfo

 

          基本樹形圖示           

                

        帶選擇框樹形圖示

1.基本配置

var setting = {
check: {
enable: true,//標記是帶選擇框的
autoCheckTrigger:false
},
data: {
simpleData: {
enable: true//標記數據模型是否需要額外配置，此方式只需使用2.數據模型的方式即可
}
},
callback: {//回調函數列表
onMouseDown: onMouseDown,//每個條目鼠標按下的回調
}
};

2.數據模型

	var zNodes= [
		{id:1, pId:0, name: "父節點1"},
		{id:11, pId:1, name: "子節點1"},
		{id:12, pId:1, name: "子節點2"}
	];

3.鼠標按下回調函數原型

function onMouseDown(event, treeId, treeNode) {}

4.初始化樹形

$.fn.zTree.init($("#treeDemo"), setting, zNodes);//必須，初始化操作，參數（節點的jq對象，配置信息，節點數據模型）
zTree = $.fn.zTree.getZTreeObj("treeDemo");//獲取樹形實例對象，便於使用其內置函數

初始化操作需要在DOM結構加載完成後進行

5.簡單DOM結構

<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>

6.更新節點數據

使用樹形實例zTree.addNodes(treeNode,節點數據模型);

節點數據模型 = {id:1, pId:0, name: "父節點1"}形式字符串即可

7.使用zTree所需引入文件

1.zTreeStyle.css

2.jquery庫文件

3.jquery.ztree.core-3.5.js

4.jquery.ztree.excheck-3.5.js//可選，使用選擇框必須引入

5jquery.ztree.exedit-3.5.js //可選，使用節點編輯時必須引入

8.更多操作詳見zTree官方API文檔