首页 > 编程 > JavaScript > 正文

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

2019-11-20 09:30:29
字体:
来源:转载
供稿:网友

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表