【zTree】 zTree使用的 小例子
使用zTree树不是第一次了 但是 还是翻阅着之前做的 对照着 使用起来比较方便 这里就把小例子列出来 总结一下使用步骤 这样方便下次使用起来方便一点
使用zTree树的步骤：
1.首先 在jsp中引用zTree相关的 CSS文件和JS文件
2.其次 在jsp中设置zTree的容器，一般一个<ul id="treeDemo" class="ztree" style="display:none;"></ul>就足够了 但是必须要设置id，是为了后续的方便使用
3.再者 在js中 配置zTree的setting 配置信息
4.如果数据是动态的 则将动态获取到的数据 动态组成ztree的节点
5.初始化 zTree树
JSP页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <link href="../css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="../css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="../lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="../lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/bootstrapValidator.min.css"/> <link rel="stylesheet" href="../css/zTree/demo.css" type="text/css">
<link rel="stylesheet" href="../css/zTree/metroStyle/metroStyle.css" type="text/css"> <title>添加角色</title>
</head>
<body style="width: 70%;">
<div class="pd-20">
<form action="" method="post" class="form form-horizontal" id="form-role-add">
<div class="row cl">
<label class="form-label col-2"><span class="c-red">*</span>角色名称：</label>
<div class="formControls col-10">
<input type="text" class="input-text" placeholder="" id="roleName" name="roleName" datatype="*4-16" nullmsg="角色名称不能为空">
</div>
</div>
<div class="row cl">
<label class="form-label col-2">备注：</label>
<div class="formControls col-10">
<input type="text" class="input-text" placeholder="" id="" name="roleCre">
</div>
</div> <div class="content_wrap row cl">
<div class="zTreeDemoBackground" >
<button type="button" class="btn btn-success radius fen" ><i class="icon-ok"></i> 分配权限</button>
<button type="button" class="btn btn-default radius yin" ><i class="icon-ok"></i> 隐藏权限</button>
<ul id="treeDemo" class="ztree" style="display:none;"></ul>
</div>
</div>
<div class="row cl">
<div class="col-10 col-offset-8">
<button type="button" class="btn btn-success radius" id="roleAdd" ><i class="icon-ok"></i> 添加</button>
<button type="reset" class="btn btn-success radius"><i class="icon-ok"></i>清空</button>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="../lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="../js/H-ui.js"></script>
<script type="text/javascript" src="../js/H-ui.admin.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="../js/systeminfo/role/roleadd.js"></script> <script type="text/javascript" src="../js/zTree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../js/zTree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../js/zTree/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="../js/systeminfo/role/zTreeUse.js"></script>
</body>
</html>
JS代码：
//zTree树的 配置信息
var setting = {
view: {
selectedMulti: true//设置是否同时选中多个节点
},
check: {
enable: true
},
data: {
simpleData: {
enable: true//使用简单数据模式。。简单数据模式就是Array
}
},
/* callback: {
beforeClick: beforeClick,//捕获单击节点之前的事件回调函数
beforeCollapse: beforeCollapse,//用于捕获父节点折叠之前的事件回调函数
beforeExpand: beforeExpand,//用于捕获父节点展开之前的事件回调函数
onCollapse: onCollapse,//用于捕获节点被折叠的事件回调函数
onExpand: onExpand//用于捕获节点被展开的事件回调函数
}*/ }; function beforeClick(treeId, treeNode) {
alert("节点点击之前事件"+treeId+treeNode.name);
return true;
}
function beforeCollapse(treeId, treeNode) {
alert("父节点折叠之前事件"+treeId+treeNode.name);
return true;
}
function beforeExpand(treeId, treeNode) {
alert("父节点展开之前事件"+treeId+treeNode.name);
return true;
}
function onCollapse(event, treeId, treeNode) {
alert("节点折叠事件"+treeId+treeNode.name);
}
function onExpand(event, treeId, treeNode) {
alert("节点展开事件"+treeId+treeNode.name);
} $(document).ready( function () { //为添加角色的表单加验证效果
$('#form-user-add').bootstrapValidator();
/**
* 添加角色的按钮
*/
$("#roleAdd").click(function(){
$('#form-role-add').bootstrapValidator('validate');//为表单的添加按钮 添加一个绑定表单的方法
var roleName = $("input[name='roleName']").val();
var roleCre = $("input[name='roleCre']").val();
var temp;
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var checkedNodes = treeObj.getCheckedNodes();
var nodeArr = new Array();
if(treeObj == null){
layer.msg('未分配权限！', {
icon: 3,
time: 2000
}, function(){
});
}else if(checkedNodes.length > 0){//勾选了
$.each(checkedNodes,function(i,node){
nodeArr.push(node.id);
});
if(roleName !="" ){
$.ajax({url:"roleAdd.htmls",
dataType:'json',
type:"post",
traditional:true,
data:{
"roleName" : roleName,
"roleCre" : roleCre,
"nodeArr" : nodeArr,
},
success:function(data){
if(data != null){
parent.page.pageSet();
}
parent.layer.close(parent.indexRoleAdd); //获取到layer的弹出窗 关闭它 indexRoleAdd
}});
}
return false;
}else if(checkedNodes.length == 0){
parent.layer.msg('未分配权限！', {
icon: 3,
time: 2000
}, function(){
});
parent.layer.close(parent.indexRoleAdd);
}
}); //点击 分配权限 则展示zTree树
$(".fen").click(function(){
$("#treeDemo").show();
$.getJSON("../roleDeal/showAllAuthority.htmls", function(data){//去后台获取到所有权限信息 用于构造zTree树
if (null != data) {
//获取角色名作为根节点名字
var rootName = $("#roleName").val();
//自定义的根节点 设置pId为0则为根节点 open代表默认打开的 nocheck表示不对根节点显示单选/复选框
var rootNodes = {id:1, pId:0, name:rootName, open:true,nocheck:true};
//构建整个权限树
var zNodes = [];
var d = data;
$.each(data,function(i,d){
var o = {};
o.id = d.authorityId;
o.operation = d.operation;
o.name = d.authorityName;
o.isEnable = d.isEnable;
o.updateDate = d.updateDate;
o.pId = d.authorityCre;
o.nocheck = false;
o.open = false;
zNodes.push(o);//再将整个的异步加载的数据 子节点给权限树 构成一个完整的树
}); zNodes.push(rootNodes);//首先将根节点给权限树
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
} else {
parent.layer.msg('没有获得项目类型信息，或分类下没有项目信息！', {//弹出框
icon: 3,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
//do something
});
}
});
});
//点击隐藏 则隐藏树
$(".yin").click(function(){
$("#treeDemo").hide();
}); //为角色名输入框 绑定change事件 狂内容改变 则树根名字变化
$("#roleName").change(function(){
var roleName = $("input[name='roleName']").val();
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
if(treeObj == null ){ }else{
var nodes = treeObj.getNodesByParam("id", 1, null);
nodes[0].name =roleName;
treeObj.refresh();
}
}); } );
如果想要更多的效果 例如节点上增删改等 按钮操作 更多的样式 更多的事件 就可以查看zTree的API
界面效果：
【zTree】 zTree使用的 小例子的更多相关文章
- jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
- springmvc入门的第一个小例子
今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...
- java即时通信小例子
学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...
- Runtime的几个小例子（含Demo）
一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.) 1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数); [runti ...
- bootstrap 模态 modal 小例子
bootstrap 模态 modal 小例子 <html> <head> <meta charset="utf-8" /> <title ...
- INI配置文件分析小例子
随手写个解析INI配置字符串的小例子 带测试 #include <iostream> #include <map> #include <string> #inclu ...
- JavaScript小例子：复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- js小例子（标签页）
运用js写的一个小例子,实现点击不同的标签出现不同的内容: <!DOCTYPE html> <html> <head> <meta chaset=" ...
- sbrk与brk的使用小例子
sbrk() 和 brk() - Unix的系统函数 sbrk()和brk() 系统的底层会维护一个位置,通过位置的移动完成内存的分配和回收.映射内存时 以一个内存页作为基本单位. void* ...
随机推荐
- ACM/ICPC 之 模拟 (HNUOJ 13391-换瓶模拟)
题意:汽水瓶有三个部分cap+plastic bottle+ label(瓶盖-瓶身-瓶底),给出数据:n为原瓶数,x,y,z为这三个部分可以用相应的数字换取新瓶子,求最大总瓶数. 模拟(暴力) // ...
- CSS3 文本3D效果
代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...
- jsp页面路径问题
jsp路径默认不是项目跟路径 一. <%@ page language="java" import="java.util.*" pageEncoding= ...
- [转帖]海森矩阵（Hessian matrix）
http://hi.baidu.com/imheaventian/item/c8591b19907bd816e2f98612
- [Python] dir() 与 __dict__，__slots__ 的区别
首先需要知道的是,dir() 是 Python 提供的一个 API 函数,dir() 函数会自动寻找一个对象的所有属性,包括搜索 __dict__ 中列出的属性. 不是所有的对象都有 __dict__ ...
- IOS-在ARC项目中使用非ARC框架或者类库
1.在ARC项目中使用非ARC框架或者类库 IOS 4引入了Automatic Reference Count(ARC),编译器可以在编译时对obj-c对象进行内存管理. 之前,obj-c的内存管理方 ...
- oracle两时间相减得到相差的时间
1.months_between(date1,date2);date1和date2相减得到相差的月份. select months_between(to_date('2015-05-11','yyyy ...
- 靶形数独（codevs 1174）
1174 靶形数独 2009年NOIP全国联赛提高组 时间限制: 4 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Descri ...
- java 设置允许ajax XMLHttpRequest 请求跨域访问
怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域. 方案1: 使用XMLHttpRequest... 异步请求不能跨域访问,除非要访问的网页响应头信息设置为允许跨域访问. 将网页设置为允许 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件
1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...