多功能jQuery樹(shù)插件zTree實(shí)現(xiàn)權(quán)限列表簡(jiǎn)單實(shí)例

    zTree 是一個(gè)依靠jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。
    頁(yè)面主要引入一下幾個(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頁(yè)面: 
    <div>
         <div>
           <div> 
             <span>權(quán)限列表</span>
           </div>
           <div>
           <ul id="tree"></ul>
           </div>
         </div>
    </div>
    核心js:
    <SCRIPT type="text/javascript">
    var zTree;
    //創(chuàng)建樹(shù)型結(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等等之類的都是對(duì)應(yīng)后臺(tái)查出的字段名字，
         在sql中寫好或者在拼接json的時(shí)候先拼接好，前太接收的時(shí)候只要對(duì)應(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);
    }
    /* 異步加載無(wú)法展開(kāi)tree 默認(rèn)展開(kāi)一級(jí)菜單 */
    var firstAsyncSuccessFlag = 0;
    function zTreeOnAsyncSuccess(event, treeId, msg) { 
    if (firstAsyncSuccessFlag == 0) { 
         try { 
             //調(diào)用默認(rèn)展開(kāi)第一個(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(){
      //頁(yè)面加載完成創(chuàng)建樹(shù)
      createTree();  
    });
    function submitRole(){
      //獲取選中的節(jié)點(diǎn)，傳到后臺(tái)
      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ù)通過(guò)后臺(tái)遞歸查詢實(shí)現(xiàn)，以json的形式傳到前臺(tái)，進(jìn)行接收。更多的內(nèi)容可以參考API，里面的例子很詳細(xì)。
    以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助