多功能jQuery树插件zTree实现权限列表简单实例

zTree 是一个依靠jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

页面主要引入一下几个文件： 

<link type=\

<script type=\ <script type=\src=\ html页面: 

<div class=\

     <div class=\

       <div class=\

         <span>权限列表</span>        </div>

       <div class=\

       <ul id=\        </div>      </div> </div> 核心js:

<SCRIPT type=\ var zTree;

//创建树型结构

function createTree() {   var setting = {     check:{

      enable:true     },

    view: {

      dblClickExpand: true,       expandSpeed: \     },

    //异步加载     async: {

      enable: true,//设置是否异步加载

      url:\设置异步获取节点的 URL 地址

      otherParam: [ \     },

    //这个data里面的pIdKey,idKey,name等等之类的都是对应后台查出的字段名字，

     在sql中写好或者在拼接json的时候先拼接好，前太接收的时候只要对应一直就可以了

    data: {

      simpleData: {

        enable: true,

        pIdKey: \         idKey: \       },

        key: {

          checked: \           name:\         }     },

    callback: {

     onAsyncSuccess: zTreeOnAsyncSuccess    }    };

  //初始化  

  zTree = $.fn.zTree.init($(\   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(\   //$(\ }

</SCRIPT>

其中数据通过后台递归查询实现，以json的形式传到前台，进行接收。更多的内容可以参考API，里面的例子很详细。

以上就是本文的全部内容，希望对大家的学习有所帮助