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

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