一.下载、安装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内容。
二.编辑页面
001 | <%@ page language="java" pageEncoding="UTF-8"%> |
002 | <%@taglib uri="/struts-tags" prefix="s"%> |
003 | <%@ include file="../common/header.jsp" %> |
009 | < meta http-equiv = "content-type" content = "text/html; charset=UTF-8" > |
011 | < link rel = "stylesheet" type = "text/css" href = "${root}/css/dialogStyle.css" /> |
012 | < link rel = "stylesheet" href = "${root}/js/zTree/css/zTreeStyle/zTreeStyle.css" type = "text/css" > |
013 | < link rel = "stylesheet" type = "text/css" href = "${root}/js/jquery/themes/icon.css" /> |
014 | < STYLE type = "text/css" > |
016 | BACKGROUND: url(../images/bt_bg.gif); |
017 | BORDER-RIGHT: #999999 1px solid; |
019 | BORDER-TOP: #CCCCCC 1px solid; |
020 | PADDING-LEFT: 2px; FONT-SIZE: 12px; |
021 | FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); |
022 | BORDER-LEFT: #CCCCCC 1px solid; |
023 | CURSOR: hand; COLOR: black; |
025 | BORDER-BOTTOM: #999999 1px solid; |
030 | 为提高效率,建议将1.4.4换成1.6.4版 |
031 | <script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script> |
033 | < script type = "text/javascript" src = "${root}/js/jquery/jquery-1.6.4.min.js" ></ script > |
034 | < script type = "text/javascript" src = "${root}/js/jquery/jquery.easyui.min.js" ></ script > |
035 | < script type = "text/javascript" src = "${root}/js/zTree/js/jquery.ztree.core-3.0.js" ></ script > |
036 | < script type = "text/javascript" src = "${root}/js/zTree/js/jquery.ztree.excheck-3.0.js" ></ script > |
037 | < script type = "text/javascript" src = "${root}/js/winutil.js" ></ script > |
040 | <script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script> |
042 | < SCRIPT type = "text/javascript" > |
048 | //contentType: "application/json",//提交参数方式,这里 JSON 格式,默认form格式 |
050 | url: '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径 |
052 | autoParam: ["id","name"]//异步加载时需要提交的参数,多个用逗号分隔 |
055 | callback: {//回调函数,在这里可做一些回调处理 |
056 | //beforeAsync: zTreeBeforeAsync |
058 | check: {//设置 zTree 的节点上是否显示 checkbox / radio ,默认为false |
064 | 如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId |
066 | enable: true,//true / false 分别表示 使用 / 不使用 简单数据模式 |
074 | var zNodes =[];//树节点,json格式,异步加载可设置为null或[] |
077 | $(document).ready(function(){ |
079 | zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//实例化后直接返回树对象 |
082 | $('#permissionform').form({ |
083 | url: '${root}/sys/PermissionManagerole.action', |
084 | onSubmit: function() { |
086 | var nodes = zTreeObj.getCheckedNodes(); |
089 | for(var i=0; i<nodes.length; i++){ |
090 | if (s != '') s += ','; |
093 | document.all("roledto.permissionIds").value = s; |
095 | success: function(data) { |
097 | var data = jQuery.parseJSON(data); |
098 | if(data.success == false){ |
111 | < BODY onunload = "m_close()" style = "background-color: #f7f7f7;" > |
112 | < div style = "border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;" > |
115 | < ul id = "permission_tree" class = "ztree" style = "border: 0px; background-color: #f7f7f7;" ></ ul > |
118 | < form id = "permissionform" method = "post" > |
121 | < td >< input type = "hidden" name = "roledto.permissionIds" /></ td > |
122 | < td >< input type = "hidden" name = "roledto.roleId" value = "${roleId}" /></ td > |
123 | < td >< input type = "hidden" name = "orgid" value = "${orgId}" /></ td > |
126 | < td width = "100%" align = "right" > |
127 | < input type = "submit" style = "width:60px;" class = "btn" value = "保存" /> |
128 | < input type = "button" style = "width:60px;" class = "btn" value = "取消" onclick = "m_close()" /> |
三.后台Action
03 | private String roleId; |
12 | @SuppressWarnings ( "unchecked" ) |
13 | public String list() throws IOException{ |
16 | * 再次查询时直接返回,这里采用所有节点一次加载的方式 |
17 | * @param id 点击树的节点时传递到后台的属性id |
19 | if (ValidateUtil.validateString(id)){ |
23 | String operationids = this .getOperationIdsByRoleId(roleId); |
24 | //查询所有的权限分类,如系统管理、订单管理、采购管理等等,作为树的一级节点 |
25 | List<OperationClass> list =operationClassServiceImpl.getAllOperationClass(); |
27 | List<Map<String,Object>> items = new ArrayList<Map<String,Object>>(); |
29 | List<RoleOperation> rolist = this .roleServiceImpl.getRoleOperationByRoleId(roleId); |
31 | for (OperationClass node: list){ //第一级遍历,遍历所有的权限分类 |
33 | Map<String,Object> item = new HashMap<String,Object>(); //最外层,父节点 |
34 | item.put( "id" , node.getOperationClassId()); //id属性 ,数据传递 |
35 | item.put( "name" , node.getClassName()); //name属性,显示节点名称 |
36 | item.put( "isParent" , true ); //设置为父节点,这样所有最外层节点都是统一的图标,看起来会舒服些 |
37 | //item.put("iconSkin", "diy02");//设置节点的图标皮肤, diy02在zTreeStyle.css中进行设置 |
40 | * 如果当前节点(权限分类)有对应的操作(权限),添加操作权限作为该节点的子节点 |
42 | if (node.getOperations()!= null &&node.getOperations().size()> 0 ){ |
44 | Iterator<Operation> it = node.getOperations().iterator(); |
46 | List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>(); |
48 | while (it.hasNext()){ //对操作进行遍历 |
50 | Map<String,Object> subitem = new HashMap<String,Object>(); //第二层 |
51 | Operation oper = (Operation) it.next(); |
52 | subitem.put( "id" , oper.getOperationId()+ ":oper" ); //id属性 ,数据传递 |
53 | subitem.put( "name" , oper.getOperationName()); //name属性,显示节点名称 |
56 | * 如果操作中有多个选项,添加选项作为第二层的子节点 |
58 | if (oper!= null &&oper.getOptions()!= null ){ |
59 | String uoption = "" ; //有操作权限的操作选项 |
60 | for (RoleOperation ro : rolist){ |
61 | if (ro.getOperation().getOperationId(). |
62 | equals(oper.getOperationId())){ //如果当前角色有对应的操作 |
63 | uoption = ro.getOptions(); |
66 | String[] suboper = oper.getOptions().split( "," ); |
67 | List<Map<String,Object>> items3 = new ArrayList<Map<String,Object>>(); //第三层 |
68 | for ( int i= 0 ;i<suboper.length;i++){ |
69 | Map<String,Object> item3 = new HashMap<String,Object>(); |
70 | item3.put( "id" , "opt:" +oper.getOperationId()+ ":" +suboper[i]); //id属性 ,数据传递 |
71 | item3.put( "name" , suboper[i]); //name属性,显示节点名称 |
73 | if (uoption!= null &&! "" .equals(uoption)){ //如果操作中有操作选项 |
74 | if (uoption.contains(suboper[i]+ "," )){ //如果当前角色有此操作选项 |
75 | item3.put( "checked" , true ); //将此选项选中 |
78 | items3.add(item3); //添加到树的第三层 |
80 | subitem.put( "children" , items3); //添加第二层子节点 |
83 | if (operationids.contains(oper.getOperationId())){ //当前角色有此操作 |
84 | subitem.put( "checked" , true ); //将此操作选中 |
87 | subitems.add(subitem); //添加到树的第二层 |
89 | item.put( "children" , subitems); //添加第一层子节点 |
92 | items.add(item); //添加到树的第一层 |
95 | JSONArray json = JSONArray.fromObject(items); //转成json格式 |
96 | jsonString = json.toString(); //json格式字符串 |
四.编后语
公司之前用的jQuery dTree。dTree也是比较好用的,跟zTree的区别不是很大。但有一点比较让人难以忍受,dTree在页面的解析效率比较低。在权限操作这一块儿换成zTree后速度提高了好几倍。
zTree的具体使用已在页面和action模块做了细致的说明,如果对其中的用法比较有疑问可以查看官方的api,中文api地址如下:
http://www.baby666.cn/v3/api.php