做到一個用戶角色權限配置的模塊，上網找了找發現ZTree不錯，於是研究啦一下，現在是凌晨，感覺效果出來了，就先發個帖子，記下來!
首先是在jsp頁面導入 jQuery 和 ZTree 相關的外置文件
這可以在我的實例代碼中找到
其中在去往權限樹頁面時無法正常通過struts 傳遞參數，所以用了笨的方法就是在小腳本內
int roId = (Integer.parseInt(request.getParameter("roId"))) 獲得角色ID 然後傳參給action 按照 角色查詢已分配權限，這樣就可以把已分配的權限 chec 設置爲true,這個寫在了Action 方法內。
下面是jsp的代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
int roId = (Integer.parseInt(request.getParameter("roId"))); //從上一個頁面傳過來用戶ID
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>角色權限配置頁面</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.2900.5848" name=GENERATOR>
<link type="text/css" rel="stylesheet" href="<%=path%>/css/css.css" />
<link rel="stylesheet"
href="<%=path%>/js/JQuery zTree v3.3/css/demo.css" type="text/css" />
<link rel="stylesheet"
href="<%=path%>/js/JQuery zTree v3.3/css/zTreeStyle/zTreeStyle.css"
type="text/css" />
<script type="text/javascript" src="<%=path%>/js/jquery-1.9.0.js"></script>
<script type="text/javascript"
src="<%=path%>/js/JQuery zTree v3.3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"
src="<%=path%>/js/JQuery zTree v3.3/js/jquery.ztree.excheck-3.5.js">
</script>
<script type="text/javascript">
var zTreeObj;
var setting = {
check : {
enable : true
},
data : {
simpleData : {
enable : true
}
}
};
$(document).ready(function() {
//var tt ='<%=roId%>';
// alert(tt);
var roId = '<%=roId%>';
alert(roId);
var url = '<%=path%>/searchRightTree.action?roId=' + roId;
alert('url:' + url);
$.ajax( {
url : url,
type : "get",
dataType : "json",
success : initZtree
});
});
function initZtree(json) {
alert('json' + json);
// var data = (json.permString);
// alert('data'+data);
var zNodes = eval("(" + json + ")");
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);
var rightsId = str;
var roId = $("#roId").val();
var roId = $("#rightsId").attr("value", rightsId);
;
var roId = $("#rightsId").val();
alert("頁面隱藏id:" + roId + "__ rightsId:" + rightsId);
$("form:first").submit();
}
</script>
</HEAD>
<BODY
style="BACKGROUND-POSITION-Y: -120px; BACKGROUND-IMAGE: url('<%=path%>/images/bg.gif'); BACKGROUND-REPEAT: repeat-x"
οnlοad="init();">
<DIV style="height: 200%">
<br>
選擇權限
<hr color="red">
<form action="<%=path%>/addRiToRo_role.action" name="checkForm"
method="post">
<div>
<ul id="kpiTree" class="ztree"></ul>
</div>
<input type="hidden" name="roId" value="<%=roId%>" id="roId" />
<input type="hidden" name="rightsId" id="rightsId" />
<input type="button" value="提交" οnclick="submitCheckedNodes()" />
</form>
</DIV>
</BODY>
</HTML>
接下來是Action 內的代碼
public class RolesAction extends ActionSupport {
// Int
private int roId; //存放角色ID
// String []
private String [] rightsId; //存放權限ID數組
// String
private String permString ;
並選中
for (TRights tRi : alist) {
if(tRi.getRightId().equals(ri.getRightId())){
sb.append("\",checked:\"");
sb.append(true);
}
}
}
sb.append("\"}");
if (size > 0) {
sb.append(",");
}
}
sb.append("]");
this.permString = sb.toString();
System.out.println("獲得的json字符串爲："+this.permString);
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
// 爲角色添加權限(刪除原先中間表信息，添加新的中間表信息)
public String addRiToRo(){
System.out.println("獲得權限ID數組大小："+rightsId.length);
rightsId=rightsId[0].split(",");
for (String it : rightsId) {
System.out.println("獲得的權限ID爲："+it);
}
if (roleBizSer.addRiToRo(roId, rightsId) == 1) {
return "role_addRi_ok";
}else{
return "role_addRi_fale";
}
}
////////////////////// get set ////////////////////
//省略............} <!-- 權限樹初始化 -->
<package name="System_right" extends="struts-default,json-default" namespace="/">
<action name="searchRightTree" class="RolesAction" method="searchRightTree">
<result type="json">
<param name="root">permString</param>
</result>
</action>
</package>以下爲效果圖
