zTree树的简单使用

zTree是一个依靠 jQuery 实现的多功能的树插件

官网:http://www.treejs.cn/v3/api.php

简单使用:

1.引入css和js

<link rel="stylesheet" href="${ctx}/staticfile/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<scrip type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>

2.简单配置

	var setting = {
		check: {
			enable: true
		},
		data: {
			simpleData: {
				enable: true  
    		}
		}
	};

3.获取后台传来的数据

后端返回json数据,为了业务需求需要在要显示的对象中添加id,pid,checked属性

private String id;  //moduleId
private String pId;  //上级的moduleId
private Boolean checked;//默认false

4.页面进行初始化zTree,加载数据

	//这里相当于在拿后来传来的数据，后台在传数据的时候，属性名要对应上
		var zNodes =${zTreeJson};
		
	$(document).ready(function(){
		$.fn.zTree.init($("#htZtree"), setting, zNodes);

		var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
		zTreeObj.expandAll(true);		//展开所有树节点
	});

5.将选中的数据传到后台

		//获取到所以用户选中的节点id值
		//获取所有选择的节点，提交时调用下面函数
		function submitCheckedNodes(treeNode) {
			//自定义数组
			var nodes = new Array();
			var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
			nodes = zTreeObj.getCheckedNodes(true);		//取得选中的结点
			var str = "";
			for (i = 0; i < nodes.length; i++) {
				if (str != "") {
					str += ",";
				}
				//获取每一个被选择的节点的id的值,拼接为字符串
				str += nodes[i].id;
			}
			
			$('#roleIds').val(str);		//将拼接完成的字符串放入隐藏域，这样就可以通过post提交
		}