zTree 是一個(gè)依靠jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。

頁面主要引入一下幾個(gè)文件： 

<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>權(quán)限列表</span>

       </div>

       <div class="qxlb_content">

       <ul id="tree" class="ztree"></ul>

       </div>

     </div>

</div>

核心js:

<SCRIPT type="text/javascript">

var zTree;

//創(chuàng)建樹型結(jié)構(gòu)

function createTree() {

  var setting = {

    check:{

      enable:true

    },

    view: {

      dblClickExpand: true,

      expandSpeed: ""

    },

    //異步加載

    async: {

      enable: true,//設(shè)置是否異步加載

      url:"<%=path%>/role/getResourcesList.do", //設(shè)置異步獲取節(jié)點(diǎn)的 URL 地址

      otherParam: [ "roleId", '${updateRole.id}']

    },

    //這個(gè)data里面的pIdKey,idKey,name等等之類的都是對應(yīng)后臺查出的字段名字，

     在sql中寫好或者在拼接json的時(shí)候先拼接好，前太接收的時(shí)候只要對應(yīng)一直就可以了

    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 默認(rèn)展開一級菜單 */

var firstAsyncSuccessFlag = 0;

function zTreeOnAsyncSuccess(event, treeId, msg) { 

if (firstAsyncSuccessFlag == 0) { 

     try { 

         //調(diào)用默認(rèn)展開第一個(gè)結(jié)點(diǎn) 

         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(){

  //頁面加載完成創(chuàng)建樹

  createTree();  

});

function submitRole(){

  //獲取選中的節(jié)點(diǎn)，傳到后臺

  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>

其中數(shù)據(jù)通過后臺遞歸查詢實(shí)現(xiàn)，以json的形式傳到前臺，進(jìn)行接收。更多的內(nèi)容可以參考API，里面的例子很詳細(xì)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助