【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* ...
随机推荐
- 将项目导入eclipse中出现的jsp页面报错解决
- bootstrap-datepicker的使用
转载自:http://michael-roshen.iteye.com/blog/1779541 在普通的网页中显示datepicker比较简单,将bootstrap-datepicker-zh_CN ...
- 用css解决iframe的自适应问题（跨域下同样有用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- Hibernate双向一对多对象关系模型映射
双向one-to-many 描述部门和岗位:一个部门有多个岗位 将单向的one-to-many 和many-to-one合并. 4.1双向的one-to-many数据库模型 create table ...
- SQLServer基本操作
SQL 全名是结构化查询语言(Structured Query Language),是关系数据库管理系统的标准语言 1.分离数据库:将当前数据库文件和数据库引擎的关系断开,没有任何关系了,这样就可以随 ...
- route命令
Linux系统的route 命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器, ...
- Bootstrap学习（一）
Bootstrap就是对jQuery的一次再开发,所以jQuery脚本引用必须在bootstrap脚本之前. 链接:http://www.cnblogs.com/vvjiang/p/5189804.h ...
- php数组的创建及操作
//数组的创建 //1 $usernames = array('李彦宏','周宏伟','马云','俞敏洪','李开复'); echo $usernames; //array,打印类型 echo '&l ...
- Jsonp跨域访问原理和实例
>>什么是跨域 出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,当前域名的js只能读取同域下的窗口属性,即同源策略.而跨域就是通过某些手段来绕过同源策略限制,实 ...
- MySQL基础二
视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( SEL ...