基于SSM的RBAC权限系统(1)-利用ajax，bootstrap，ztree完成权限树功能

基于SSM的RBAC权限系统(1)-利用ajax，bookstrap，ztree完成权限树功能

仅支持回显以及选择，不支持在树中的编辑

效果图如下

搭建后台回显以及修改的模块

JSON数据封装

public class Msg {
private int code;
private String msg;
private Map<String,Object> extend=new HashMap<String,Object>();
//还有一些getset方法没显示出来
public static Msg success(){
Msg result = new Msg();
result.setCode(100);
result.setMsg("处理成功");
return result;
}

public static Msg fail(){
Msg result = new Msg();
result.setCode(200);
result.setMsg("处理失败");
return result;
}

public static Msg noPermission(){
Msg result = new Msg();
result.setCode(250);
result.setMsg("没有权限");
return result;
}

public static Msg reject(){
Msg result = new Msg();
result.setCode(300);
result.setMsg("拒绝请求");
return result;
}

}

Controller中的代码,RequiredPermission为自定义注解

@ResponseBody
@RequiredPermission("树形分配:获得回显信息")
@RequestMapping("role/treePermission_echo")
public Msg treePermission_echo(@RequestParam("ID")Long ID) throws Exception{
//这里判断有无权限，具体原因请看其他文章
Throwable t = new Throwable();
boolean isHasPermission=PermissionUtil.hasPermission(this.getClass(),t.getStackTrace()[0].getMethodName());
if(!isHasPermission)
return Msg.noPermission().add("returnMsg","您没有权限【树形分配:获得回显信息】");
//从下一层获取ztree权限树数据
List<ZtreePermission> allZtreeMsg =
permissionService.getAllZtreeMsg(ID);
System.out.println();
return Msg.success().add("allZtreeMsg",allZtreeMsg);
}

@ResponseBody
@RequiredPermission("树形分配:修改")
@RequestMapping("role/treePermission_alter")
public Msg treePermission_alter(@RequestParam("permissionListTree")List<String> permissionListTree
) throws Exception {
Throwable t = new Throwable();
boolean isHasPermission=PermissionUtil.hasPermission(this.getClass(),t.getStackTrace()[0].getMethodName());
if(!isHasPermission)
return Msg.noPermission().add("returnMsg","您没有权限【树形分配:修改】");
ArrayList<Long> permissionListID = new ArrayList<>();
Long ID=Long.valueOf(permissionListTree.get(0));
//判断是权限组还是权限，是权限则加入
for(String  permissionID:permissionListTree){
if(permissionID.charAt(0)=='p'){
permissionListID.add(Long.valueOf(permissionID.substring(2,permissionID.length())));
}
}
//这里其实可以优化，我暂时采用了删除所有再更新的方法
roleToPermissionService.deleteById(ID);
for(Long id:permissionListID){
RoleToPermission roleToPermission=new RoleToPermission();
Role role = new Role();
role.setId(ID);
Permission permission=new Permission();
permission.setId(id);
roleToPermission.setRole(role);
roleToPermission.setPermission(permission);
roleToPermissionService.addItem(roleToPermission);
}
return Msg.success();
}

ztree树的构建

因为我需要的功能复杂度不高，所以ztree设定很简单

var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes ;
function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
type = { "Y" : "ps", "N" : "ps" };
zTree.setting.check.chkboxType =  type;
}
$(".treeBtn").each(function () {
$(this).click(function () {
ID = $(this).attr("name");
$.ajax({
url: "role/treePermission_echo",
//ID为你本次选择需要为哪个角色分配权限的角色ID
data: "ID=" + ID,
type: "POST",
success: function (result) {
if (result.code == 100) {
zNodes=result.extend.allZtreeMsg;
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
} else if(result.code==250){
//弹出权限不足的窗口
$("#btn_closeTree").click();
show_errorWindows(result.extend.returnMsg);
}
}
});
});
});

看看最简单的checkbox权限树结构



ztree非常方便，甚至不用我们自己写算法递归出树，因此只要将结构封装成一样的json丢给zNodes就可以了！

ztree对应的实体类

public class ZtreePermission {
String id;
String pId;
String name;
Boolean checked;
Boolean open;

public ZtreePermission(){

}

public ZtreePermission(Permission permission){
this.id="p."+permission.getId();
this.pId="g."+permission.getParentID();
this.name=permission.getName();
this.open=false;
this.checked=false;
}

public ZtreePermission(Permission_Groud permission_groud){
this.id="g."+permission_groud.getId();
this.pId="g."+permission_groud.getParentID();
this.name=permission_groud.getName();
this.checked=null;
this.open=true;
}
}

值得注意的是如果你有两张表而且id重复的话，可以这样 id=”student.1” pid=”teacher.2”

回显部分代码

这里只获取了ID，如果需要其他数据可以查看API文档

$("#btn_inputTree").click(function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes=zTree.getCheckedNodes(true);
permissionListTree = new Array();
//这里我把ID丟进了ID第一位，后台要注意！！
permissionListTree.push(ID);
for ( var j = 0; j < nodes.length; j++) {
permissionListTree.push(nodes[j].id);
}
$.ajax({
url: "role/treePermission_alter",
data: "permissionListTree="+permissionListTree,
type: "POST",
success: function (result) {
if(result.code ==100){
$("#btn_closeTree").click();
}else if(result.code==250){
$("#btn_closeTree").click();
//权限不足，显示窗口 show_errorWindows(result.extend.returnMsg);
}

}
});

});

最后来看看最简单窗口代码

<div class="modal fade" id="dtreeModal" tabindex="-1" role="dialog" aria-labelledby="preModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" action="" method="post">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span
aria-hidden="true">×</span><span
class="sr-only">Close</span></button>
<h4 class="modal-title">树形分配</h4>
</div>
<div class="modal-body" >
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
<div class="modal-footer">
<button  id="btn_closeTree" data-dismiss="modal" class="btn btn-default" type="button">
关闭
</button>
<button  id="btn_inputTree" class="btn btn-primary" type="button">提交</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>

完整项目地址

这是我第一个写的web项目，代码烂得飞起，仅供纪念，不做参考

带Shiro版：https://github.com/EnTaroAdunZ/ssm_rbac_shiro.git

不带Shiro版：https://github.com/EnTaroAdunZ/ssm_rbac.git