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文档