zTree实现权限列表简单实例

zTree的简单实例

　　zTree 是一个依靠jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

　　zTree官网

　　zTreeAPI下载链接

　　页面主要引入一下几个文件：

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

　　html页面:

<div class="edit_content">
            <div class="qxlb">
                <div class="add_title"> 
                    <span>权限列表</span>
                </div>
                <div class="qxlb_content">
                <ul id="tree" class="ztree"></ul>
                </div>
            </div>
  </div>

　　核心js:

<SCRIPT type="text/javascript">
var zTree;
//创建树型结构
function createTree() {
	var setting = {
	    check:{
		    enable:true
	    },
		view: {
			dblClickExpand: true,
			expandSpeed: ""
		},
		//异步加载
		async: {
			enable: true,//设置是否异步加载
			url:"<%=path%>/role/getResourcesList.do", //设置异步获取节点的 URL 地址
			otherParam: [ "roleId", '${updateRole.id}']
			
		},
		
        //这个data里面的pIdKey,idKey,name等等之类的都是对应后台查出的字段名字，在sql中写好或者在拼接json的时候先拼接好，前太接收的时候只要对应一直就可以了
		data: {
			simpleData: {
				enable: true,
				pIdKey: "PARENTID",
				idKey: "ID"
			},
				key: {
					checked: "CHECKED",
					name:"NAME"
				}
		},
		callback: {
  		  onAsyncSuccess: zTreeOnAsyncSuccess  
	}  
	};
	//初始化	
	zTree = $.fn.zTree.init($("#tree"), setting);	
	zTree.expandAll(true);
}
/* 异步加载无法展开tree 默认展开一级菜单 */
var firstAsyncSuccessFlag = 0;
function zTreeOnAsyncSuccess(event, treeId, msg) {  
if (firstAsyncSuccessFlag == 0) {  
          try {  
                 //调用默认展开第一个结点  
                 var selectedNode = zTree.getSelectedNodes();  
                 var nodes = zTree.getNodes();  
                 zTree.expandNode(nodes[0], true);  
                 var childNodes = zTree.transformToArray(nodes[0]);  
                 zTree.expandNode(childNodes[1], true);  
                 zTree.selectNode(childNodes[1]);  
                 var childNodes1 = zTree.transformToArray(childNodes[1]);  
                 zTree.checkNode(childNodes1[1], true, true);  
                 firstAsyncSuccessFlag = 1;  
           } catch (err) {  
           
           }  
     }  
}

$(function(){
	//页面加载完成创建树
	createTree();	
});

function submitRole(){
    //获取选中的节点，传到后台
	var nodes = zTree.getCheckedNodes();
	var ids = [];
	for(var i=0,l=nodes.length;i<l;i++){
	   ids[ids.length] = nodes[i].ID;
	}
	//var _resourcesIds=ids.join(",");
	document.getElementById("hidden_resourceList").value=ids.join(",");
			
	//$("#resourcesRoleListForm").submit();
}
</SCRIPT>

　　其中数据通过后台递归查询实现，以json的形式传到前台，进行接收。更多的内容可以参考API，里面的例子很详细。