多功能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,里面的例子很详细。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。