ZTree+Struts2+ajax+json實現checkbox權限樹

zTree的插件可以在網上下載：http://www.ztree.me/v3/main.php#_zTreeInfo

參考了一些資料後，寫的一個權限樹（直接上代碼）：

1、JSP:

<%@ page language="java" import="java.util.*"
contentType="text/html; charset=gb2312" errorPage=""%>
<%@ page import="com.whu.model.baseinfo.*"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CheckTree v 0.2 by JJ Geewax</title>
<link rel="stylesheet" href="../js/JQuery zTree v3.3/css/demo.css"
type="text/css" />
<link rel="stylesheet"
href="../js/JQuery zTree v3.3/css/zTreeStyle/zTreeStyle.css"
type="text/css" />
<script type="text/javascript"
src="../js/JQuery zTree v3.3/js/jquery-1.4.4.min.js">
</script>
<script type="text/javascript"
src="../js/JQuery zTree v3.3/js/jquery.ztree.core-3.3.js">
</script>
<script type="text/javascript"
src="../js/JQuery zTree v3.3/js/jquery.ztree.excheck-3.3.js">
</script>
<script type="text/javascript">
var zTreeObj;
var setting = {
check : {
enable : true
},
data : {
simpleData : {
enable : true
}
}
};
$(document).ready(function() {
$.ajax( {
url : "../systemManage/permTreeAction.action",
type : "get",
dataType : "json",
success : initZtree
});
});
function initZtree(json) {
var data = (json.permString);
var zNodes = eval("(" + data + ")");
zTreeObj = $.fn.zTree.init($('#kpiTree'), setting, zNodes);
}
function submitCheckedNodes(treeNode) {
var nodes = new Array();
//取得選中的結點
nodes = zTreeObj.getCheckedNodes(true);
var str = "";
for (i = 0; i < nodes.length; i++) {
if (str != "") {
str += ",";
}
str += nodes[i].id;
}
alert(str);
}
</script>
</head>
<body>
<form action="" name="checkForm" method="post">
<div>
<ul id="kpiTree" class="ztree"></ul>
</div>
<input type="button" value="提交" onclick="submitCheckedNodes()" />
</form>
</body>
</html>

<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=gb2312" errorPage=""%>
<%@ page import="com.whu.model.baseinfo.*"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>CheckTree v 0.2 by JJ Geewax</title>

		<link rel="stylesheet" href="../js/JQuery zTree v3.3/css/demo.css"
			type="text/css" />
		<link rel="stylesheet"
			href="../js/JQuery zTree v3.3/css/zTreeStyle/zTreeStyle.css"
			type="text/css" />

		<script type="text/javascript"
			src="../js/JQuery zTree v3.3/js/jquery-1.4.4.min.js">
</script>
		<script type="text/javascript"
			src="../js/JQuery zTree v3.3/js/jquery.ztree.core-3.3.js">
</script>
		<script type="text/javascript"
			src="../js/JQuery zTree v3.3/js/jquery.ztree.excheck-3.3.js">
</script>


		<script type="text/javascript">
var zTreeObj;
var setting = {
	check : {
		enable : true
	},
	data : {
		simpleData : {
			enable : true
		}
	}
};

$(document).ready(function() {
	$.ajax( {
		url : "../systemManage/permTreeAction.action",
		type : "get",
		dataType : "json",
		success : initZtree
	});
});

function initZtree(json) {
	var data = (json.permString);
	var zNodes = eval("(" + data + ")");
	zTreeObj = $.fn.zTree.init($('#kpiTree'), setting, zNodes);
}

function submitCheckedNodes(treeNode) {
	var nodes = new Array();
	//取得選中的結點
	nodes = zTreeObj.getCheckedNodes(true);
	var str = "";
	for (i = 0; i < nodes.length; i++) {
		if (str != "") {
			str += ",";
		}
		str += nodes[i].id;
	}
	alert(str);
}
</script>


	</head>


	<body>
		<form action="" name="checkForm" method="post">
			<div>
				<ul id="kpiTree" class="ztree"></ul>
			</div>
			<input type="button" value="提交" οnclick="submitCheckedNodes()" />
		</form>
	</body>
</html>

2、Action:

[java] view plain copy print ?

package com.whu.action;
import java.util.ArrayList;
import com.opensymphony.xwork2.ActionSupport;
import com.whu.iservice.systemmanage.impl.PermService;
import com.whu.model.baseinfo.PermModel;
public class RoleAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private IRoleService roleService = new RoleService();
private String permString;
public String getPermString() {
return permString;
}
public void setPermString(String permString) {
this.permString = permString;
}
public String searchPermTree() {
try {
ArrayList<PermModel> plist = new ArrayList<PermModel>();
plist = (ArrayList<PermModel>) new PermService().findAllPerms();//獲取所有權限
//拼成 json 字符串
StringBuilder sb = new StringBuilder();
int size = plist.size();
sb.append("[");
for (PermModel m : plist) {
size--;
sb.append("{id:\"");
sb.append(m.getPermid());
sb.append("\",pId:\"");
sb.append(m.getParentid());
sb.append("\",name:\"");
sb.append(m.getPermname());
if(m.hasChildren()){
sb.append("\",open:\"");
sb.append(true);
}
sb.append("\"}");
if (size > 0) {
sb.append(",");
}
}
sb.append("]");
this.permString = sb.toString();
} catch (Exception e) {
// TODO Auto-generated catch block 50.
e.printStackTrace();
}
return SUCCESS;
}
}

package com.whu.action;

import java.util.ArrayList;
import com.opensymphony.xwork2.ActionSupport;
import com.whu.iservice.systemmanage.impl.PermService;
import com.whu.model.baseinfo.PermModel;
public class RoleAction extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private IRoleService roleService = new RoleService();

	private String permString;


	public String getPermString() {
		return permString;
	}

	public void setPermString(String permString) {
		this.permString = permString;
	}

	public String searchPermTree() {
		
		try {
			ArrayList<PermModel> plist = new ArrayList<PermModel>();
			plist = (ArrayList<PermModel>) new PermService().findAllPerms();//獲取所有權限
                            //拼成 json 字符串
			StringBuilder sb = new StringBuilder();
			int size = plist.size();
			sb.append("[");
			for (PermModel m : plist) {
				size--;
				sb.append("{id:\"");
				sb.append(m.getPermid());
				sb.append("\",pId:\"");
				sb.append(m.getParentid());
				sb.append("\",name:\"");
				sb.append(m.getPermname());
				
				if(m.hasChildren()){
					sb.append("\",open:\"");
					sb.append(true);
				}				

				sb.append("\"}");
				if (size > 0) {
					sb.append(",");
				}
			}
			sb.append("]");

			this.permString = sb.toString();
		} catch (Exception e) {
			// TODO Auto-generated catch block 50.
			e.printStackTrace();
		}
		return SUCCESS;

	}

}

struts.xml:

[html] view plain copy print ?

<package name="sysManage" namespace="/systemManage"
extends="struts-default,json-default">
<action name="permTreeAction" class="com.whu.action.RoleAction" method="searchPermTree">
<result type="json"></result>
</action>
</package>

	<package name="sysManage" namespace="/systemManage"
		extends="struts-default,json-default">
		<action name="permTreeAction" class="com.whu.action.RoleAction" method="searchPermTree">
			<result type="json"></result>
		</action>
		
	</package>

3、如果要讓zTree初始化：

則在拼成 json 字符串的時候，添加：

sb.append("\",checked:\"");sb.append(true);

4、效果圖：