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

以上就是本文的全部内容，希望对大家的学习有所帮助