多功能jQuery树插件zTree实现权限列表简单实例
zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。
zTree官网
zTreeAPI下载链接
页面主要引入一下几个文件：
<linktype="text/css"rel="stylesheet"href="zTree/zTreeStyle.css"/> <scripttype="text/javascript"src="js/jquery.ztree.core-3.5.js"></script> <scripttype="text/javascript"src="js/jquery.ztree.excheck-3.5.js"></script>
html页面:
<divclass="edit_content"> <divclass="qxlb"> <divclass="add_title"> <span>权限列表</span> </div> <divclass="qxlb_content"> <ulid="tree"class="ztree"></ul> </div> </div> </div>
核心js:
<SCRIPTtype="text/javascript">
varzTree;
//创建树型结构
functioncreateTree(){
varsetting={
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默认展开一级菜单*/
varfirstAsyncSuccessFlag=0;
functionzTreeOnAsyncSuccess(event,treeId,msg){
if(firstAsyncSuccessFlag==0){
try{
//调用默认展开第一个结点
varselectedNode=zTree.getSelectedNodes();
varnodes=zTree.getNodes();
zTree.expandNode(nodes[0],true);
varchildNodes=zTree.transformToArray(nodes[0]);
zTree.expandNode(childNodes[1],true);
zTree.selectNode(childNodes[1]);
varchildNodes1=zTree.transformToArray(childNodes[1]);
zTree.checkNode(childNodes1[1],true,true);
firstAsyncSuccessFlag=1;
}catch(err){
}
}
}
$(function(){
//页面加载完成创建树
createTree();
});
functionsubmitRole(){
//获取选中的节点，传到后台
varnodes=zTree.getCheckedNodes();
varids=[];
for(vari=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，里面的例子很详细。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。