- 浏览: 683521 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (141)
- java (58)
- SQL (7)
- java开源 (2)
- javascript (3)
- struts2 (2)
- oracle (6)
- junit (1)
- js报表 (1)
- jQuery (5)
- 插件安装 (1)
- myeclipse (1)
- xfire (1)
- weblogic (1)
- hibernate (6)
- loading (1)
- jbpm (3)
- 物语 (0)
- android (14)
- spring (20)
- BigDecimal (1)
- view (1)
- 总结 (2)
- application (1)
- Netty (5)
- aop (1)
- redis (7)
- double (1)
- restful (1)
- cache (3)
- profile (1)
- redisTemplate (1)
- poi (3)
- excel导出 (1)
- mysql (7)
- group (4)
- replication (4)
- proxysql (1)
- windows (1)
- version (1)
- mongodb (2)
- RocketMQ (1)
- MQ (1)
- RSA (1)
- 日志 (2)
- ip (1)
- socket (1)
- hibernate-validator (1)
- delayQueue (1)
- spring-retry (1)
- rabbitmq (3)
- httpclient (1)
- tools (1)
- 增量发布 (1)
- web (3)
- spring-boot (5)
- druid (2)
- pageHelper (1)
- freemarker (1)
- RequestMapping (1)
- 性能优化 (2)
- springBoot (1)
- docker (2)
- 安全 (0)
- 国际化 (3)
- websocket (1)
- stomp (1)
- shiro (1)
- 网络安全 (2)
- 锁 (1)
- logback (1)
最新评论
-
changerzhuo_319:
谢谢大佬, 查了一天了没解决
Spring-boot构建多模块依赖工程时,maven打包异常:程序包xxx不存在 -
迪伦少校:
spring越来越优秀的同时,也越来越复杂
spring核心技术(1) -
hbxflihua:
ivi13 写道这种方式会有个问题,假如有个商户的交易量特别大 ...
使用spring-retry实现支付系统异步通知 -
ivi13:
这种方式会有个问题,假如有个商户的交易量特别大,通知全部失败, ...
使用spring-retry实现支付系统异步通知 -
ckxlnd:
挺好的 有借鉴意义
重写DispatcherServlet获取springmvc 所有RequestMapping的url
一.下载、安装zTree
zTree下载地址:http://code.google.com/p/jquerytree/downloads/list 这里我下载的是JQuery zTree v3.0。目前最新版是v3.1,一般不建议使用最新版。 下载完成后解压,可以看到其中有三个文件夹和一个更新日志文件。 Css文件夹 zTree的样式和图片存放位置 Demo文件夹 存放zTree的一些实例 Js文件夹 存放的是所有与zTree相关的js文件。这里min是压缩版,我们在开发的时候建议使用未压缩版的(不含min的)。 开发时建议将这些压缩包统一放在一个文件夹(比如zTree)下,这样,如果需要查看对应的实例,可直接在当前工程下访问并做修改,便于开发使用。当然,开发完成后可以删除demo内容。
二.编辑页面
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ include file="../common/header.jsp" %>
<!DOCTYPE html>
<HTML>
<HEAD>
<title>指派权限</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${root}/css/dialogStyle.css"/>
<link rel="stylesheet" href="${root}/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="${root}/js/jquery/themes/icon.css" />
<STYLE type="text/css">
.btn {
BACKGROUND: url(../images/bt_bg.gif);
BORDER-RIGHT: #999999 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #CCCCCC 1px solid;
PADDING-LEFT: 2px; FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
BORDER-LEFT: #CCCCCC 1px solid;
CURSOR: hand; COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #999999 1px solid;
}
</STYLE>
<!--
为提高效率,建议将1.4.4换成1.6.4版
<script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script>
-->
<script type="text/javascript" src="${root}/js/jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="${root}/js/jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="${root}/js/winutil.js"></script>
<!--
<script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script>
-->
<SCRIPT type="text/javascript">
<!--
var setting = {
async: {
enable: true,//异步处理
//contentType: "application/json",//提交参数方式,这里 JSON 格式,默认form格式
url: '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径
autoParam: ["id","name"]//异步加载时需要提交的参数,多个用逗号分隔
},
callback: {//回调函数,在这里可做一些回调处理
//beforeAsync: zTreeBeforeAsync
},
check: {//设置 zTree 的节点上是否显示 checkbox / radio ,默认为false
enable: true
},
data: {
simpleData: {
/**
如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId
并且让数据满足父子关系。*/
enable: true,//true / false 分别表示 使用 / 不使用 简单数据模式
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var zNodes =[];//树节点,json格式,异步加载可设置为null或[]
var zTreeObj;//树对象
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//实例化后直接返回树对象
//异步提交表单
$('#permissionform').form({
url: '${root}/sys/PermissionManagerole.action',
onSubmit: function() {
//获取树对象中选中的节点
var nodes = zTreeObj.getCheckedNodes();
var s = '';//选中节点ids
//遍历选中的节点,为s赋值
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].id;
}
document.all("roledto.permissionIds").value = s;
},
success: function(data) {
//操作成功,返回信息
var data = jQuery.parseJSON(data);
if(data.success == false){
alert(data.msg);
}
m_close();
}
});
});
//-->
</SCRIPT>
</HEAD>
<BODY onunload="m_close()" style="background-color: #f7f7f7;">
<div style="border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;">
<!-- 树加载后存放的容器 -->
<ul id="permission_tree" class="ztree" style="border: 0px; background-color: #f7f7f7;"></ul>
<!-- 提交授权操作表单 -->
<form id="permissionform" method="post">
<table>
<tr>
<td><input type="hidden" name="roledto.permissionIds" /></td>
<td><input type="hidden" name="roledto.roleId" value="${roleId}"/></td>
<td><input type="hidden" name="orgid" value="${orgId}"/></td>
</tr>
<tr>
<td width="100%" align="right">
<input type="submit" style="width:60px;" class="btn" value="保存"/>
<input type="button" style="width:60px;" class="btn" value="取消" onclick="m_close()"/>
</td>
</tr>
</table>
</form>
</div>
</BODY>
</HTML>
三.后台Action
private String id;
private String roleId;
/**
* 显示权限栏目树
* 这里采用一次加载所有树节点的方式
* 当然也可以换成逐级动态加载的方式
* @return
* @throws IOException
*/
@SuppressWarnings("unchecked")
public String list() throws IOException{
/**
* 再次查询时直接返回,这里采用所有节点一次加载的方式
* @param id 点击树的节点时传递到后台的属性id
*/
if(ValidateUtil.validateString(id)){
return SUCCESS;
}
//根据角色找到对应的操作权限id
String operationids = this.getOperationIdsByRoleId(roleId);
//查询所有的权限分类,如系统管理、订单管理、采购管理等等,作为树的一级节点
List<OperationClass> list =operationClassServiceImpl.getAllOperationClass();
//存放树节点信息
List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
//当前角色对应的操作
List<RoleOperation> rolist = this.roleServiceImpl.getRoleOperationByRoleId(roleId);
for(OperationClass node: list){ //第一级遍历,遍历所有的权限分类
Map<String,Object> item = new HashMap<String,Object>(); //最外层,父节点
item.put("id", node.getOperationClassId());//id属性 ,数据传递
item.put("name", node.getClassName()); //name属性,显示节点名称
item.put("isParent", true);//设置为父节点,这样所有最外层节点都是统一的图标,看起来会舒服些
//item.put("iconSkin", "diy02");//设置节点的图标皮肤, diy02在zTreeStyle.css中进行设置
/**
* 如果当前节点(权限分类)有对应的操作(权限),添加操作权限作为该节点的子节点
*/
if (node.getOperations()!=null&&node.getOperations().size()>0){
Iterator<Operation> it = node.getOperations().iterator();
//存放第一层子节点信息
List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>();
while(it.hasNext()){//对操作进行遍历
Map<String,Object> subitem = new HashMap<String,Object>();//第二层
Operation oper = (Operation) it.next();
subitem.put("id", oper.getOperationId()+":oper");//id属性 ,数据传递
subitem.put("name", oper.getOperationName()); //name属性,显示节点名称
/**
* 如果操作中有多个选项,添加选项作为第二层的子节点
*/
if(oper!=null&&oper.getOptions()!=null){
String uoption = "";//有操作权限的操作选项
for(RoleOperation ro : rolist){
if(ro.getOperation().getOperationId().
equals(oper.getOperationId())){//如果当前角色有对应的操作
uoption = ro.getOptions();
}
}
String[] suboper = oper.getOptions().split(",");
List<Map<String,Object>> items3 = new ArrayList<Map<String,Object>>(); //第三层
for(int i=0;i<suboper.length;i++){
Map<String,Object> item3 = new HashMap<String,Object>();
item3.put("id", "opt:"+oper.getOperationId()+":"+suboper[i]);//id属性 ,数据传递
item3.put("name", suboper[i]); //name属性,显示节点名称
if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作选项
if(uoption.contains(suboper[i]+",")){//如果当前角色有此操作选项
item3.put("checked", true);//将此选项选中
}
}
items3.add(item3);//添加到树的第三层
}
subitem.put("children", items3);//添加第二层子节点
}else{//如果操作没有选项
if(operationids.contains(oper.getOperationId())){//当前角色有此操作
subitem.put("checked", true);//将此操作选中
}
}
subitems.add(subitem);//添加到树的第二层
}
item.put("children", subitems);//添加第一层子节点
}
items.add(item); //添加到树的第一层
}
JSONArray json = JSONArray.fromObject(items);//转成json格式
jsonString = json.toString();//json格式字符串
return SUCCESS;
}
四.编后语
公司之前用的jQuery dTree。dTree也是比较好用的,跟zTree的区别不是很大。但有一点比较让人难以忍受,dTree在页面的解析效率比较低。在权限操作这一块儿换成zTree后速度提高了好几倍。 zTree的具体使用已在页面和action模块做了细致的说明,如果对其中的用法比较有疑问可以查看官方的api,中文api地址如下:http://www.baby666.cn/v3/api.php,或者也可以给我留言,我们共同探讨。
发表评论
-
关于ShowModalDialog中的Excel导出窗口不能自动弹出的问题
2012-08-27 12:01 3714给一个ShowModalDialog添加导出的功能。测试的时候 ... -
Jqpivottable实现多维分析
2012-06-12 11:29 4109多维分析就是在原有一维、二维分析的基础上继续添加维度,已 ... -
jQuery 遮罩效果
2011-12-16 16:11 5857随着互联网的发展,对于系统而言,客户的体验显得越来越至关重要了 ... -
jquery 结合iframe造成内存泄露
2011-10-19 14:42 8619系统通过iframe载入一个子页面,来模拟窗口、多页面等。系统 ...
相关推荐
总之,jQuery ZTree是一款强大的树形组件,通过动态加载、丰富的API和事件系统,为开发者提供了构建动态树形结构的强大工具。通过深入理解和实践,开发者可以灵活地将其应用于各种项目中,提升用户体验。
总的来说,JQUERY ZTREE是构建动态树形结构的强大工具,结合jQuery的便利性,可以轻松实现复杂的数据展示需求。通过熟练掌握其基本用法和高级特性,开发者可以高效地构建出用户友好的交互界面。
jQuery ZTree是一款强大的JavaScript组件,用于构建具有丰富交互效果的树状菜单或树形控件。在面对大数据量时,ZTree提供了异步加载功能,能够显著提高用户体验,避免一次性加载所有节点导致页面响应速度变慢。 **1...
在IT行业中,构建一个高效的组织结构和人员管理系统是至关重要的,而"java jquery Ztree 机构人员树示例"就是一种实现方式。这个示例利用了Java后端技术和前端jQuery库ZTree,来创建一个可交互的、可视化展示机构与...
JQuery zTree是一款基于JavaScript的开源树...总之,JQuery zTree v3.3是一个强大且易用的JavaScript树形插件,它通过提供多种操作功能、良好的性能以及灵活的定制选项,满足了开发者在构建网页树形结构时的各种需求。
本篇文章将深入探讨如何利用jQuery ZTree实现模糊查询功能,并对树上的节点添加过滤器。 首先,我们要理解jQuery ZTree的核心特性之一是其强大的数据管理能力。通过配置数据参数,我们可以定制树的展示方式,包括...
zTree充分利用了jQuery库的强大功能,使得在网页上构建交互式的树形结构变得简单快捷。这个插件广泛应用于网站导航、数据展示、组织结构图等场景,支持多种操作,如节点的增删改查、异步加载、多选、拖拽等功能。 ...
jQuery ZTree是一款强大的JavaScript树形菜单插件,尤其适用于构建自定义编辑功能。本文将深入探讨如何利用ZTree实现自定义编辑的树形菜单。 ZTree的核心特性在于其灵活性和扩展性,允许开发者根据需求定制菜单的...
《jQuery zTree——构建树形下拉框的详解与应用》 在Web开发中,为了提升用户体验和界面的交互性,我们常常会遇到需要展示层级结构数据的情况,这时树形控件便显得尤为重要。jQuery zTree是一款基于jQuery的优秀...
zTree是jQuery的一个扩展,它通过HTML的`<ul>`和`<li>`元素构建树结构,利用CSS进行样式控制,通过JavaScript实现动态交互。zTree的核心功能包括节点操作(添加、删除、修改)、节点状态管理(展开、折叠、选中、...
jQuery zTree是一款基于JQuery库的插件,用于构建功能丰富的树形菜单。它具有许多优点,如利用JQuery的核心代码实现,支持多种浏览器,包括IE、Firefox、Chrome、Opera和Safari。zTree的最新版本v3.0对代码进行了...
jQuery zTree是一款基于JavaScript的开源树形插件,专为jQuery库设计。它以其强大的功能、丰富的API和灵活的配置选项,广泛应用于网页中的数据展示、操作与交互。zTree V3.1作为其最新版本,不仅继承了前代的优点,...
**jQuery ztree文件夹树形结构菜单插件** 在网页设计和开发中,为了更好地组织和展示层级结构数据,如文件系统或组织架构,我们常常会使用到树形结构组件。jQuery ztree就是一个专为此目的设计的插件,它允许开发者...
jQuery zTree是一款基于JavaScript的开源树形插件,它在Web开发中广泛用于构建动态、交互式的树状数据结构。这个插件的核心优势在于其灵活性、易用性和丰富的功能集,使得开发者可以快速地为网站添加各种树形展示...
在 `jQuery ztreedemo` 中,JavaScript 与 jQuery 框架结合,用于实现树形结构的动态行为,如节点的展开、折叠、点击事件等。 3. **HTML** - HTML(超文本标记语言)是网页的基础结构语言,`jQuery ztreedemo` 的...
**jQuery zTree** 是一个基于jQuery的开源树形插件,它被广泛应用于网页中构建交互式的树形结构。这个插件提供了丰富的功能,如节点的增删改查、节点的展开与折叠、多选模式、异步加载数据等。在本资料中,我们包含...
JQuery-zTree是一款基于jQuery的树形插件,它提供了丰富的功能和良好的性能,尤其适用于构建树形结构的菜单和数据展示。在移动端应用中,zTree能够自适应屏幕尺寸,提供良好的用户体验。本项目提供的代码是针对...
《jQuery ZTree自定义编辑树形菜单插件代码解析与应用》 在Web开发中,树形菜单是一种常见的数据展示方式,它能够清晰地呈现层级关系,...通过熟练掌握其API和事件,开发者可以构建出满足各种需求的动态树形菜单系统。