多功能jQuery树插件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，里面的例子很详细。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。