zTree学习详解

一.需要引入的包

    <link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css">                               //zTree样式包
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.7.1.min.js"></script>                      //jquery包
    <script type="text/javascript" src="<%=basePath%>js/jquery.ztree.all-3.5.min.js"></script>              //zTree包

二.代码

1.开始配置

var setting = {
		data: {
			simpleData: {
				enable: true     //是否异步
			}
		},
		callback:{
			onClick: clickjd         //点击节点事触发事件<span style="font-family: Arial, Helvetica, sans-serif;">clickjd         </span>

		}
};

2.获取的数据配置

		var zNodes =[
			{ id:1, pId:0, name:"父节点1 - 展开",src:"Ym.jsp?id=222"},                 //src自定义属性
			{ id:11, pId:1, name:"父节点11 - 折叠"},
			{ id:111, pId:11, name:"叶子节点111"},
			{ id:112, pId:11, name:"叶子节点112"},
			{ id:113, pId:11, name:"叶子节点113"},
			{ id:114, pId:11, name:"叶子节点114"},
			{ id:12, pId:11, name:"父节点12 - 折叠"},
			{ id:121, pId:12, name:"叶子节点121"},
			{ id:122, pId:12, name:"叶子节点122"},
			{ id:123, pId:12, name:"叶子节点123"},
			{ id:124, pId:12, name:"叶子节点124"},
			{ id:13, pId:11, name:"父节点13 - 没有子节点", isParent:true},
			{ id:2, pId:0, name:"父节点2 - 折叠"},
			{ id:21, pId:2, name:"父节点21 - 展开"},
			{ id:211, pId:21, name:"叶子节点211"},
			{ id:212, pId:21, name:"叶子节点212"},
			{ id:213, pId:21, name:"叶子节点213"},
			{ id:214, pId:21, name:"叶子节点214"},
			{ id:22, pId:2, name:"父节点22 - 折叠"},
			{ id:221, pId:22, name:"叶子节点221"},
			{ id:222, pId:22, name:"叶子节点222"},
			{ id:223, pId:22, name:"叶子节点223"},
			{ id:224, pId:22, name:"叶子节点224"},
			{ id:23, pId:2, name:"父节点23 - 折叠"},
			{ id:231, pId:23, name:"叶子节点231"},
			{ id:232, pId:23, name:"叶子节点232"},
			{ id:233, pId:23, name:"叶子节点233"},
			{ id:234, pId:23, name:"叶子节点234"},
			{ id:3, pId:0, name:"父节点3 - 没有子节点"}
		];

3.加载zTree

$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);               //加载zTree  变量1.加载到的地方 2.zTree配置 3.加载的数据
		});

4.相对于第一步的方法

		function clickjd(event,treeId,treeNode){                          //js的event对象，<span style="font-family: Arial, Helvetica, sans-serif;">treeId当前的id，</span><span style="font-family: Arial, Helvetica, sans-serif;">被点击的节点 JSON 数据对象</span><span style="font-family: Arial, Helvetica, sans-serif;">
</span>
			$("#ym").attr("src",treeNode.src)
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");           //获取zTree对象
			var newNode = {id:333,name:"333new"};
			newNode = zTree.addNodes(treeNode, newNode);              //添加节点

			return false;
		}