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


Posted in Javascript onJuly 12, 2016

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

zTree官网
zTreeAPI下载链接 

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

<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,里面的例子很详细。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 #Javascript
Angular 路由route实例代码
Jul 12 #Javascript
javascript中获取class的简单实现
Jul 12 #Javascript
springMVC结合AjaxForm上传文件
Jul 12 #Javascript
require简单实现单页应用程序(SPA)
Jul 12 #Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 #Javascript
javascript中Date对象应用之简易日历实现
Jul 12 #Javascript
You might like
PHP网上调查系统
2006/10/09 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
ECMAScript 基础知识
2007/06/29 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python之字典对象的几种创建方法
2020/09/30 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
一句话工作感言
2014/03/01 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
公司管理建议书
2015/09/14 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Node与Python 双向通信的实现代码
2021/07/16 Javascript