【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* ...
随机推荐
- 【工具】 原版完美激活 Flash builder 4.7 【非破解激活】
此方法原理在于激活 FlashBuilder 4.7 而不是破解(靠修改文件,或改变版本号),所以此破解更加稳定! FlashBuilder 4.7 下载地址: 32bit:http://trials ...
- 通过JavaScript操作HTML中select标签
添加: Js代码 1.function selectChange() 2.{ 3.var sel=document.getElementById("select1"); 4. Op ...
- oracle定时器，调用存储过程，定时从n张表中取值新增到本地一张表中
--创建新增本地数据库的存储过程create or replaceprocedure pro_electric_record as begin insert into electric_met ...
- September 1st 2016 Week 36th Thursday
Everything is going on, but don't give up trying. 万事随缘,但不要放弃努力. There are numerous things that we ca ...
- XMPP框架下微信项目总结（1）环境配置
xmpp介绍 xmpp基于模块开发的 无须自己写请求 (登陆,注册,获取好友列表,添加/删除好友等) ------>简介 ------------------------- ----->工 ...
- iOS - 常用的宏定义
1.处理NSLog事件(开发者模式打印,发布者模式不打印) 1 2 3 4 5 #ifdef DEBUG #define NSLog(FORMAT, ...) fprintf(stderr,& ...
- AngularJS XMLHttpRequest $http服务
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 读取JSON文件 以下是存储在web服务器上的 JSON 文件: http://www.runoob.com/try/ ...
- Paragon NTFS for Mac® Yosemite - 免费下载
文章链接:http://www.paragon-software.com/cn/home/ntfs-mac-yosemite/registration.html
- #Mac技巧#如何在Mac系统上新建TXT文档，以及打开txt文稿的乱码问题如何解决
使用mac的朋友可能都有这样的疑问,mac系统下强大的文本编辑器居然不能保存常用的TXT格式? 又或者打开同事在windows上保存的TXT文件会出现如下情况: 最近Hans也被这些问题困扰着,于是便 ...
- Powershell实例小结（服务管理）
有关服务管理的具体实例脚本如下: #$lists="1.1.1.1","2.2.2.2" #远程ip列表 foreach ($list in $lists){ ...