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

    zTree 是一個依靠jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。
    頁面主要引入一下幾個文件： 
    <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>
         <div>
           <div> 
             <span>權(quán)限列表</span>
           </div>
           <div>
           <ul id="tree"></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é)點的 URL 地址
          otherParam: [ "roleId", '${updateRole.id}']
        },
        //這個data里面的pIdKey,idKey,name等等之類的都是對應(yīng)后臺查出的字段名字，
         在sql中寫好或者在拼接json的時候先拼接好，前太接收的時候只要對應(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)展開第一個結(jié)點 
             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é)點，傳到后臺
      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ù)通過后臺遞歸查詢實現(xiàn)，以json的形式傳到前臺，進(jìn)行接收。更多的內(nèi)容可以參考API，里面的例子很詳細(xì)。
    以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助