【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* ...
随机推荐
- redis+crontab+php异步处理任务
2016年1月8日 16:08:43 星期五 情景: 用户登录日志, 发邮件, 发短信等等实时性要求不怎么高的业务通常会异步执行 之前接触过几种redis+crontab配套的实现方法, 比如: cr ...
- Selenium WebDriver 处理table
首先,html table是由 table 元素以及一个或多个 tr.th 或 td 元素组成. for example: 这是一个简单的html table: 源码如下: <html> ...
- CSS3 文本3D效果
代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...
- Effective C++ -----条款49：了解new-handler 的行为
set_new_handler允许客户指定一个函数,在内存分配无法获得满足时被调用. Nothorw new 是一个颇为局限的工具,因为它只适用于内存分配:后继的构造函数调用还是可能抛出异常.
- Mac会给你一些欣喜
Mac会给你一些欣喜 以前一直没有用过Mac,一直都是用Windows的电脑,只是偶尔会去用Ubuntu这样的Linux系统.Mac OS 确实是一只可以给你欣喜的系统. 上周拿到公司分发的Mac,到 ...
- linux 增加用户 useradd 用法小结及配置文件说明
转自CSDN,http://blog.csdn.net/warden2010/article/details/5132290,谢谢作者 在Linux 系统中,所有的用户和组像一个国家.如果国家要繁荣昌 ...
- HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...
- asp.net 图片下载
string fileName = "123.jpg";//图片名字 string filePath = Server.MapPath(&qu ...
- hdu3038(带权并查集)
题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=3038 题意: n表示有一个长度为n的数组, 接下来有m行形如x, y, d的输入, 表示 ...
- SQL 映射的 XML 文件
MyBatis 真正的力量是在映射语句中.这里是奇迹发生的地方. 对于所有的力量, SQL映射的 XML 文件是相当的简单.当然如果你将它们和对等功能的 JDBC 代码来比较,你会发现映射文件节省了大 ...