多功能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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
JS实现图片切换特效
2019/12/23 Javascript
Python实现的简单dns查询功能示例
2017/05/24 Python
Selenium定位元素操作示例
2018/08/10 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
物流管理应届生求职信
2013/11/07 职场文书
运动会班级口号
2014/06/09 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
万里长城导游词
2015/01/30 职场文书
初中物理教学反思
2016/02/19 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
Vue2.0搭建脚手架
2022/03/13 Vue.js
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers