中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

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

以上就是本文的全部內容，希望對大家的學習有所幫助