【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* ...
随机推荐
- cxGrid 速度
在做AdoHelper实用程序的时候,我用了DevExpress的cxGrid控件．在此之前用的是dbgrid,考虑到不能把所有的数据都拉到本地,我用了动态生成的select top 500的命令．这 ...
- Java for LintCode 颠倒整数
将一个整数中的数字进行颠倒,当颠倒后的整数溢出时,返回 0 (标记为 32 位整数). 解题思路: JAVA实现如下: public int reverseInteger(int n) { Boole ...
- ABAP 内表的行列转换-发货通知单2
*&---------------------------------------------------------------------* *& Report Z_TEST_C ...
- [ 转] [Android]多式样ProgressBar
多式样ProgressBar 普通圆形ProgressBar 该类型进度条也就是一个表示运转的过程,例如发送短信,连接网络等等,表示一个过程正在执行中. 一般只要在XML布局中定义就可以了. < ...
- pydev导入eclipse
编辑器:Python 自带的 IDLE 简单快捷, 学习Python或者编写小型软件的时候.非常有用. 编辑器: Eclipse + pydev插件 1. Eclipse是写JAVA的IDE, 这样就 ...
- java基础学习05(面向对象基础01--类实例分析)
面向对象基础01(类实例分析) 实现的目标 1.如何分析一个类(类的基本分析思路) 分析的思路 1.根据要求写出类所包含的属性2.所有的属性都必须进行封装(private)3.封装之后的属性通过set ...
- python中的编码问题：以ascii和unicode为主线
1.unicode.gbk.gb2312.utf-8的关系 http://www.pythonclub.org/python-basic/encode-detail 这篇文章写的比较好,utf-8 ...
- ASINetworkQueues(经典2)
ASINetworkQueues, 它的delegate提供更为丰富的功能 提 供的更多的回调方法如下: a,requestDidStartSelector,请求发起时会调此方法,你可以在此方法中跟据 ...
- August 12th 2016 Week 33rd Friday
Everything is good in its season. 万物逢时皆美好. Every dog has its day. You are not in your best condition ...
- GTID复制之二
在线启用GTID,这样就不会对生产造成影响. 1.在每个Server上,执行 SET @@GLOBAL.ENFORCE_GTID_CONSISTENCY=WARN;确保在ErrorLog中没有WARN ...