zTree实现权限列表简单实例
zTree的简单实例
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,里面的例子很详细。
zTree实现权限列表简单实例的更多相关文章
- 【JEECG技术博文】JEECG 简单实例解说权限控制
JEECG简单实例解说权限控制 请大家点击这里为我们投票.2015博客之星.很多其他分享敬请期待 博文地址:http://blog.itpub.net/30066956/viewspace-18687 ...
- Docker初步认识安装和简单实例
前话 问题 开发网站需要搭建服务器环境,FQ官网下载软件包,搭建配置nginx,apache,数据库等.官网没有直接可用的运行版本,担心网络流传的非官方发布软件包不安全还得自行编译官方源码安装,忘记步 ...
- Mysql笔记——触发器简单实例
首先贴上触发器语法吧: CREATE TRIGGER <触发器名称> –触发器必须有名字,最多64个字符,可能后面会附有分隔符.它和MySQL中其他对象的命名方式基本相象. { BEFOR ...
- javamail发送邮件的简单实例(转)
javamail发送邮件的简单实例 今天学习了一下JavaMail,javamail发送邮件确实是一个比较麻烦的问题.为了以后使用方便,自己写了段代码,打成jar包,以方便以后使用.呵呵 以下三段代码 ...
- SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 异常汇总:http://www ...
- [转载]SVN权限设置具体实例
原文地址:SVN权限设置具体实例作者:白菜豆腐 1 背景假设 厦门央瞬公司是一家电子元器件设备供应商,其中有个ARM部门,专门负责ARM芯片的方案设计.销售,并在北京.上海各设立了一个办事处.对于 ...
- MySQL 触发器简单实例 - 转载
MySQL 触发器简单实例 触发器:可以更新,删除,插入触发器,不同种类的触发器可以存在于同一个表,但同种类的不能有多个.一个更新.一个删除是可以共存的. ~~语法~~ CREATE TRIGGER ...
- Django学习笔记(一):环境安装与简单实例
Django学习笔记(一):环境安装与简单实例 通过本文章实现: Django在Windows中的环境安装 Django项目的建立并编写简单的网页,显示欢迎语与当前时间 一.环境安装 结合版本兼容性等 ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
随机推荐
- LetExpr表达式解读
Integer a = 0; a++; 举个例子,如下: package com.test19; public class BugReport<T> { private T n; publ ...
- Elasticsearch入门(一)
索引(index) -- 存储关联数据的地方.实际上,索引只是一个逻辑命名空间(logical namespace),它指向一个或多个分片(shards). 分片(shard) 是 工作单元(work ...
- 关于文档头部定义和meta元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 基于TrueLicense实现产品License验证功能
受朋友所托,需要给产品加上License验证功能,进行试用期授权,在试用期过后,产品不再可用. 通过研究调查,可以利用Truelicense开源框架实现,下面分享一下如何利用Truelicense实现 ...
- Spanner:谷歌新一代全球部署的列式数据库
Spanner 是一个可扩展的.全球分布式的数据库,提供分布式ACID. 架构 universe:一个部署的实例成为universe,目前谷歌有3个,分别为开发/测试/线上 Zone:一个数据中心,相 ...
- Nodejs学习笔记(十四)—Mongoose介绍和入门
简介 Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具 那么要使用它,首先你得装上node.js和mongodb,关于mongodb的安装和操作介绍可以参考:ht ...
- mybatis逆向工程总结工具类
逆向工程字面意思就是反向生成工程,和hibernate一样mybatis也有自己的逆向工程工具,hibernate的逆向生成我没有做过,不过我猜大概都已样,再说,hibernate的现在使用很少了,到 ...
- 前端性能优化---缓存篇SDK
1.把前端最常用的资源css.js存在本地1.1 前端缓存技术SessionStorage 优点:临时存储神器,关闭页面标签自动回收,不可以跨页面交互. 取值的时候有两种方法,一种是用session ...
- SpringMVC源码阅读:核心分发器DispatcherServlet
1.前言 SpringMVC是目前J2EE平台的主流Web框架,不熟悉的园友可以看SpringMVC源码阅读入门,它交代了SpringMVC的基础知识和源码阅读的技巧 本文将介绍SpringMVC的核 ...
- ARM的体系结构与编程系列博客——ARM体系变种
ARM体系变种的简介 有人会很奇怪一件事情,ARM居然会变种,不会是基因突变了吧,呵呵,其实ARM变种通俗一点来讲呢,就是ARM突然具备了一种特定的功能!并非是基因突变哦!ARM是reboot好不好? ...