zTreeAPI
效果图：
首先我们来分析下表结构：
sys_auth是权限代码表，一个权限对应一行数据，可以理解为该系统拥有的所有权限集。
sys_user_auth是权限分配表，一行数据表示一个用户拥有一个权限，可以理解为分配给用户的权限集。--auth_id是sys_auth的外键，与主键ID对应。
1.当我们要修改一个用户的权限，点击修改，跳到controller
@RequestMapping(value = "/userInput")
public String userInput(final ModelMap model,
HttpServletRequest request, HttpServletResponse response,
@RequestParam Map<String, String> params){
String id=params.get("id");
if(id!=null&& id.length()>0){
Map<String,Object> user = userService.findBySysUser(Long.parseLong(id));//获取要修改权限的用户
List<Map<String, Object>> list = userService.getUserAuth(Long.parseLong(id));//获取该用户的所有权限
String authIds = "";
for (Map<String, Object> map : list) {
authIds += map.get("auth_id")+",";//组装权限集
}
if (list.size() > 0) {
authIds = authIds.substring(0,authIds.length()-1);
}
user.put("authIds", authIds);
model.put("userparam", user);//将这个用户及他的权限集传值到页面
}
model.put("params", params);
return "/user/userInput";
}
2.userInput.jsp
<%@page pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<script type="text/javascript" >
function ctx(){
return '${ctx}';
}
</script>
<script type="text/javascript" src="${ctx }/scripts/jquery-1.4.4.min.js"></script>
<link rel="stylesheet" href="${ ctx}/scripts/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ ctx}/scripts/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ ctx}/scripts/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="${ ctx}/scripts/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="${ ctx}/scripts/viewjs/user/userInput.js"></script>
</head>
<body>
<div class="container">
<div id="forms" class="mt10">
<div class="box">
<div class="box_border">
<div class="box_top"><b class="pl15">用户<c:out value="${userparam.id ==null?'新增':'修改'}"></c:out></b></div>
<div class="box_center">
<form:form id="userSave" action="${ctx}/user/userSave" method="post">
<input type="hidden" id="id" name="id" value="${userparam.id }" />
<table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="td_right" valign="top">权限：</td>
<td width="250" style="padding-right: 50px;">
<div class="tree_menu">
[ <a id="expandAllBtn" href="#" onclick="return false;">展开</a> ] [ <a id="collapseAllBtn" href="#" onclick="return false;">折叠</a> ]
[ <a id="checkAllTrue" href="#" onclick="return false;">全选</a> ] [ <a id="checkAllFalse" href="#" onclick="return false;">全不选</a> ]
</div>
<div style="height: 300px;width:360px;overflow-x:auto; ">
<input id="authIds" name="authIds" type="hidden" value="${userparam.authIds}" />
<ul id="treeDemo" class="ztree" style="height: 300px;"></ul>
</div>
</td>
</tr>
<tr>
<td class="td_right"> </td>
<td colspan="3">
<input type="submit" name="userSaveBut" id="userSaveBut" class="btn btn82 btn_save2" value="保存">
<input type="button" onclick="backHref('${ctx}/user/userQuery','${params.pageParam }')" class="btn btn82 btn_back" value="返回">
</td>
</tr>
</table>
</form:form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
3.userInput.js
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: getAuth
}
};
$(document).ready(function() {
$.post(ctx()+"/sysag/ajaxAuthQuery?authIds=" + $("#authIds").val(), function(data) {
zNodes = data.zNodes;
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
selectNodes("${userparam.id }");
$("#expandAllBtn").bind("click", {//展开
type: "expandAll"
}, expandNode);
$("#collapseAllBtn").bind("click", {//折叠
type: "collapseAll"
}, expandNode);
$("#checkAllTrue").bind("click", {//全选
type: "checkAllTrue"
}, checkNode);
$("#checkAllFalse").bind("click", {//全不选
type: "checkAllFalse"
}, checkNode);
});
$("#userSave").validate({
rules: {
user_name: {
required: true,
maxlength: 20,
remote: {
url: ctx()+"/user/checkUser", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
id: function() {
return $("#id").val();
},
group_name: function() {
return $("#user_name").val();
}
},
error: function(a, b, c) {
$.messager.alert("提示", "error！", "error");
}
}
}
},
messages: {
user_name: {
remote: messagesFomat("该用户名已存在！")
}
},
submitHandler: function(form) {
$.messager.confirm("提示", "是否确认保存该用户?", function(r) {
if (r) {
$(form).ajaxSubmit(function(data) {
if (data.flag == 0) {
$.messager.alert("提示", "保存成功！", "info", function() {
if ($("#id").val().length == 0) {
clearFrom("#userSave");
}
});
} else if (data.flag == 4) {
$.messager.alert("提示", "保存失败！", "error");
}
});
}
});
}
});
});
function selectNodes(id) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(zTree.getNodeByParam("id", id));
}
function expandNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
type = e.data.type;
if (type == "expandAll") {
zTree.expandAll(true);
} else if (type == "collapseAll") {
zTree.expandAll(false);
}
}
function checkNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
type = e.data.type;
if (type == "checkAllTrue") {
zTree.checkAllNodes(true);
} else if (type == "checkAllFalse") {
zTree.checkAllNodes(false);
}
getAuth();
}
function getAuth(e, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var checkVals = "";
for (var i = 0; i < nodes.length; i++) {
checkVals += nodes[i].id + ",";
}
if (checkVals.length > 0) {
checkVals = checkVals.substring(0, checkVals.length - 1);
}
$("#authIds").val(checkVals);
}
4.SysAuthGroupController
/**
* 权限管理
*/
@Controller
@RequestMapping(value = "/sysag")
public class SysAuthGroupController extends BaseController {
//查询权限
@RequestMapping(value = "/ajaxAuthQuery")
public void ajaxAuthQuery(HttpServletResponse response,@RequestParam Map<String, String> params){
List<Map<String, Object>> list = authService.findAuthAll();//所有权限
int len =list.size();
List<Map<String, Object>> listJson = new ArrayList<Map<String,Object>>();
String authIds = ","+params.get("authIds")+",";//该用户的权限集
for (int i = 0; i < len; i++) {
Map<String, Object> map = list.get(i);
Map<String,Object> mapJson = new HashMap<String, Object>();
mapJson.put("id", map.get("id"));
mapJson.put("pId", map.get("parent_id"));
mapJson.put("name", map.get("auth_name"));
mapJson.put("open", true);
if (authIds.indexOf(map.get("id").toString())>-1) {
mapJson.put("checked", true);//该用户的所有权限打钩
}
/*String[] authIdsArr = params.get("authIds").split(",");
List<String> authIdsList = Arrays.asList(authIdsArr);
if(authIdsList.contains(map.get("id").toString())){
mapJson.put("checked", true);
}*/
listJson.add(mapJson);
}
Map<String, Object> msg = new HashMap<String, Object>();
msg.put("zNodes", listJson);//返回给userInput.js
String json = JSONObject.fromObject(msg).toString();
outJson(json, response);
}
}