ztree插件使用

官网：ztree.me

在页面中引入ztree相关的文件：

<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

使用简单json数据构造ztree：

<!-- 展示ztree效果 :使用简单json数据构造ztree-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
	$(function(){
		//页面加载完成后，执行这段代码----动态创建ztree
		var setting2 = {
				data: {
					simpleData: {
						enable: true//使用简单json数据构造ztree节点
					}
				}
		};
		//构造节点数据
		var zNodes2 = [
			         {"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
			         {"id":"2","pId":"3","name":"节点二"},
			         {"id":"3","pId":"0","name":"节点三"}
			      ];
				//调用API初始化ztree
			$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
	});
</script>

效果：

发送ajax请求获取json数据构造ztree：

<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
	$(function(){
		//页面加载完成后，执行这段代码----动态创建ztree
		var setting3 = {
				data: {
					simpleData: {
						enable: true//使用简单json数据构造ztree节点
					}
				}
		};
						
		//发送ajax请求，获取json数据
		//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
		var url = "${pageContext.request.contextPath}/json/demo.json";
		$.post(url,{},function(data){
			//调用API初始化ztree
			$.fn.zTree.init($("#ztree3"), setting3, data);
		},'json');
	});
</script>

使用ztree提供的API为节点绑定点击事件:

<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
	$(function(){
		//页面加载完成后，执行这段代码----动态创建ztree
		var setting3 = {
				data: {
					simpleData: {
						enable: true//使用简单json数据构造ztree节点
					}
				},
				callback: {
					//为ztree节点绑定单击事件
					onClick: function(event, treeId, treeNode){//treeNode代表当前对象
						if(treeNode.url!= undefined){
						       //判断选项卡是否已经存在
							var e = $("#mytabs").tabs("exists",treeNode.name);
							if(e){
								//已经存在，选中
								$("#mytabs").tabs("select",treeNode.name);
							}else{
								//动态添加一个选项卡
								$("#mytabs").tabs("add",{
									title:treeNode.name,
									closable:true,
									content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.url+'"></iframe>'
								});
							}
						}
					}
				}
		};
						
		//发送ajax请求，获取json数据
		//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
		var url = "${pageContext.request.contextPath}/json/demo.json";
		$.post(url,{},function(data){
			//调用API初始化ztree
			$.fn.zTree.init($("#ztree3"), setting3, data);
		},'json');
	});
</script>

扩展：使用ztree勾选效果（checkbox）

1.其他的都跟上面的一样，只需要加check：{enable:true}这个属性。

。

2.点击保存时获取勾选的值：

3.定义一个隐藏域，用于把勾选的值赋给他。