基于 jQuery zTree 构建动态加载的树

最新推荐文章于 2024-03-09 21:49:48 发布

转载最新推荐文章于 2024-03-09 21:49:48 发布 · 1.3w 阅读

文章标签：

#jquery #object #string #json #function #border

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在权限管理场景中使用zTree，包括下载安装、页面编辑及后台Action实现，以及与dTree相比的优势。通过具体示例展示了如何通过zTree实现权限的动态加载与操作管理，显著提升了页面解析效率。

一．下载、安装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" %>

004

005 <!DOCTYPE html>

006 <HTML>

007 <HEAD>

008 <title>指派权限</title>

009 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

010

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">

015 .btn {

016 BACKGROUND: url(../images/bt_bg.gif);

017 BORDER-RIGHT: #999999 1px solid;

018 PADDING-RIGHT: 2px;

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;

024 PADDING-TOP: 2px;

025 BORDER-BOTTOM: #999999 1px solid;

026 }

027 </STYLE>

028

029 <!--

030 为提高效率，建议将1.4.4换成1.6.4版

031 <script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script>

032 -->

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>

038

039 <!--

040 <script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script>

041 -->

042 <SCRIPT type="text/javascript">

043 <!--

044 var setting = {

045 async: {

046 enable: true,//异步处理

047

048 //contentType: "application/json",//提交参数方式，这里 JSON 格式，默认form格式

049

050 url: '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径

051

052 autoParam: ["id","name"]//异步加载时需要提交的参数，多个用逗号分隔

053

054 },

055 callback: {//回调函数，在这里可做一些回调处理

056 //beforeAsync: zTreeBeforeAsync

057 },

058 check: {//设置 zTree 的节点上是否显示 checkbox / radio ,默认为false

059 enable: true

060 },

061 data: {

062 simpleData: {

063 /**

064 如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId

065 并且让数据满足父子关系。*/

066 enable: true,//true / false 分别表示使用 / 不使用简单数据模式

067 idKey: "id",

068 pIdKey: "pId",

069 rootPId: 0

070 }

071 }

072 };

073

074 var zNodes =[];//树节点，json格式，异步加载可设置为null或[]

075 var zTreeObj;//树对象

076

077 $(document).ready(function(){

078

079 zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//实例化后直接返回树对象

080

081 //异步提交表单

082 $('#permissionform').form({

083 url: '${root}/sys/PermissionManagerole.action',

084 onSubmit: function() {

085 //获取树对象中选中的节点

086 var nodes = zTreeObj.getCheckedNodes();

087 var s = '';//选中节点ids

088 //遍历选中的节点，为s赋值

089 for(var i=0; i<nodes.length; i++){

090 if (s != '') s += ',';

091 s += nodes[i].id;

092 }

093 document.all("roledto.permissionIds").value = s;

094 },

095 success: function(data) {

096 //操作成功，返回信息

097 var data = jQuery.parseJSON(data);

098 if(data.success == false){

099 alert(data.msg);

100 }

101 m_close();

102 }

103 });

104

105 });

106

107 //-->

108 </SCRIPT>

109 </HEAD>

110

111 <BODY onunload="m_close()" style="background-color: #f7f7f7;">

112 <div style="border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;">

113

114 

115 <ul id="permission_tree" class="ztree" style="border: 0px; background-color: #f7f7f7;"></ul>

116

117 

118 <form id="permissionform" method="post">

119 <table>

120 <tr>

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>

124 </tr>

125 <tr>

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()"/>

129 </td>

130 </tr>

131 </table>

132 </form>

133

134 </div>

135

136 </BODY>

137 </HTML>

三．后台Action

`01`	`private` `String id;`

02

`03`	`private` `String roleId;`

04

05 /**

`06`	`* 显示权限栏目树`

`07`	`* 这里采用一次加载所有树节点的方式`

`08`	`* 当然也可以换成逐级动态加载的方式`

`09`	`* @return`

`10`	`* @throws IOException`

11 */

`12`	`@SuppressWarnings("unchecked")`

`13`	`public` `String list()` `throws` `IOException{`

14

15 /**

`16`	`* 再次查询时直接返回，这里采用所有节点一次加载的方式`

`17`	`* @param id 点击树的节点时传递到后台的属性id`

18 */

`19`	`if(ValidateUtil.validateString(id)){`

`20`	`return` `SUCCESS;`

21 }

`22`	`//根据角色找到对应的操作权限id`

`23`	`String operationids =` `this.getOperationIdsByRoleId(roleId);`

`24`	`//查询所有的权限分类，如系统管理、订单管理、采购管理等等，作为树的一级节点`

`25`	`List<OperationClass> list =operationClassServiceImpl.getAllOperationClass();`

`26`	`//存放树节点信息`

`27`	`List<Map<String,Object>> items =` `new` `ArrayList<Map<String,Object>>();`

`28`	`//当前角色对应的操作`

`29`	`List<RoleOperation> rolist =` `this.roleServiceImpl.getRoleOperationByRoleId(roleId);`

30

`31`	`for(OperationClass node: list){` `//第一级遍历，遍历所有的权限分类`

32

`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中进行设置`

38

39 /**

`40`	`* 如果当前节点（权限分类）有对应的操作（权限），添加操作权限作为该节点的子节点`

41 */

`42`	`if` `(node.getOperations()!=null&&node.getOperations().size()>0){`

43

`44`	`Iterator<Operation> it = node.getOperations().iterator();`

`45`	`//存放第一层子节点信息`

`46`	`List<Map<String,Object>> subitems =` `new` `ArrayList<Map<String,Object>>();`

47

`48`	`while(it.hasNext()){//对操作进行遍历`

49

`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属性，显示节点名称`

54

55 /**

`56`	`* 如果操作中有多个选项，添加选项作为第二层的子节点`

57 */

`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();`

64 }

65 }

`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属性，显示节点名称`

72

`73`	`if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作选项`

`74`	`if(uoption.contains(suboper[i]+",")){//如果当前角色有此操作选项`

`75`	`item3.put("checked",` `true);//将此选项选中`

76 }

77 }

`78`	`items3.add(item3);//添加到树的第三层`

79 }

`80`	`subitem.put("children", items3);//添加第二层子节点`

81

`82`	`}else{//如果操作没有选项`

`83`	`if(operationids.contains(oper.getOperationId())){//当前角色有此操作`

`84`	`subitem.put("checked",` `true);//将此操作选中`

85 }

86 }

`87`	`subitems.add(subitem);//添加到树的第二层`

88 }

`89`	`item.put("children", subitems);//添加第一层子节点`

90

91 }

`92`	`items.add(item);` `//添加到树的第一层`

93

94 }

`95`	`JSONArray json = JSONArray.fromObject(items);//转成json格式`

`96`	`jsonString = json.toString();//json格式字符串`

97

`98`	`return` `SUCCESS;`

99 }

四．编后语

公司之前用的jQuery dTree。dTree也是比较好用的，跟zTree的区别不是很大。但有一点比较让人难以忍受，dTree在页面的解析效率比较低。在权限操作这一块儿换成zTree后速度提高了好几倍。

zTree的具体使用已在页面和action模块做了细致的说明，如果对其中的用法比较有疑问可以查看官方的api，中文api地址如下： http://www.baby666.cn/v3/api.php