您的位置：首页 > Web前端 > JQuery

多功能jQuery树插件zTree实现权限列表简单实例

2016-07-12 10:04 891 查看

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

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

<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，里面的例子很详细。

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery 树插件 zTree 权限列表

相关文章推荐

新的分享

章节导航