您的位置：首页 > Web前端 > JQuery

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

2012-09-07 14:31 246 查看

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

005	<!DOCTYPE html>

HTML

HEAD

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

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

.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;

027	</ STYLE >

<!--

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

<!--

044	var setting = {

async: {

046	enable: true,//异步处理

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

059	enable: true

},

data: {

062	simpleData: {

/**

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

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

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

067	idKey: "id",

068	pIdKey: "pId",

069	rootPId: 0

};

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

075	var zTreeObj;//树对象

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() {

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;

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

},

095	success: function(data) {

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

097	var data = jQuery.parseJSON(data);

098	if(data.success == false){

099	alert(data.msg);

101	m_close();

});

});

//-->

108	</ SCRIPT >

</

HEAD

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

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

114	<!--树加载后存放的容器 -->

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

117	<!--提交授权操作表单 -->

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

table

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 >

</

tr

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

</

td

</

tr

131	</ table >

</

form

</

div

</

BODY

</

HTML

三．后台Action

01	private String id;

03	private String roleId;

/**

* 显示权限栏目树

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

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

* @return

10	* @throws IOException

*/

12	@SuppressWarnings ( "unchecked" )

13	public String list() throws IOException{

/**

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

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

*/

19	if (ValidateUtil.validateString(id)){

20	return SUCCESS;

22	//根据角色找到对应的操作权限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>>();

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

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

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

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); //添加第二层子节点

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

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格式字符串

98	return SUCCESS;

四．编后语

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航