快捷導(dǎo)航

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

更新時(shí)間：2016年07月12日 10:04:04 作者：河岸飛流

這篇文章主要介紹了多功能jQuery樹插件zTree實(shí)現(xiàn)權(quán)限列表簡單實(shí)例，優(yōu)異的性能、靈活的配置、多種功能的組合，是樹插件zTree最大的優(yōu)勢，感興趣的小伙伴們可以參考一下

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: