开发工具与关键技术:MyEclipse 、SSM 、layui、 ajax、 mysql、zTree
作者:李冬梅
撰写时间:2019年2月02日
查询树形角色权限树形:
Controller代码:
@RequestMapping(value = "/SelectModuleToRoleCondition", produces = { "application/json;charset=UTF-8" })
@ResponseBody
public String SelectModuleToRoleCondition(Integer userid) {
JSONObject json = new JSONObject();
String msg = "";
json.put("state", "no");
json.put("msg", "");
json.put("data", "");
try {
// 查询菜单
List<Menudata> menudatas = iMenudataService.selectMenudataAll();
// 查询菜单权限
List<Menupermissionsdata> menupermissionsdataMappers = iMenudataService
.selectMenupermissionsdataCode();
// 拼接数据
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
for (int i = 0; i < menudatas.size(); i++) {
Menudata item = menudatas.get(i);
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", item.getMenucode());
map.put("name", item.getMenuname());
map.put("pId", "0");
map.put("open", true);// 默认不展开
map.put("chkDisabled", false);// 不禁用
map.put("checked", false);//
// open 展开节点 bool
// chkDisabled 禁用复选框状态 bool
// checked 勾选状态 bool
list.add(map);
}
for (int i = 0; i < menupermissionsdataMappers.size(); i++) {
Menupermissionsdata item = menupermissionsdataMappers.get(i);
Map<String, Object> map = new HashMap<String, Object>();
map.put("id", item.getMenupermissionscode());
map.put("name", item.getMenupermissionsname());
map.put("pId", item.getMenucode());
map.put("open", true);// 默认不展开
map.put("chkDisabled", false);// 不禁用
map.put("checked", false);//
// open 展开节点 bool
// chkDisabled 禁用复选框状态 bool
// checked 勾选状态 bool
list.add(map);
}
// 查询用户分配的菜单
List<RolemenudataKey> rolemenudataKeys = iMenudataService
.selectRolemenudataKey(userid);
for (int i = 0; i < rolemenudataKeys.size(); i++) {
RolemenudataKey item1 = rolemenudataKeys.get(i);
for (int j = 0; j < list.size(); j++) {
Map<String, Object> map = list.get(j);
if (map.get("pId").equals("0")
&& item1.getMenucode().equals(map.get("id"))) {
map.put("checked", true);
}
}
}
// 查询用户分配的权限
List<RolemenupermissionsdataKey> rolemenupermissionsdataKeys = iMenudataService
.selectRolemenupermissionsdataKey(userid);
for (int i = 0; i < rolemenupermissionsdataKeys.size(); i++) {
RolemenupermissionsdataKey item1 = rolemenupermissionsdataKeys
.get(i);
for (int j = 0; j < list.size(); j++) {
Map<String, Object> map = list.get(j);
if (!map.get("pId").equals("0")
&& item1.getMenupermissionscode().equals(
map.get("id"))) {
map.put("checked", true);
}
}
}
json.put("data", list);
json.put("state", "ok");
} catch (Exception e) {
msg = e.getMessage();
}
json.put("msg", msg);
return json.toString();
}
树形使用的两个插件:
jsp页面的代码:
// 获取分配权限html代码
function getJurisdictionHmtl() {
var html = '';
html += ' <!--用户信息-->';
html += '<div style="height:33px;line-height:33px;padding-left: 20px;"> ';
html += ' <label style="padding-top: 10px;margin-left: 0px;">角色名称:<span id="lbRoleName"></span></label>';
html += ' </div>';
html += '<!--查询用户权限的结果树形及保存等按钮-->';
html += '<div id="userAuthorityUpdate" class="layui-row" style="position:relative;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;">';
html += ' <!--绑定树形-->';
html += ' <div id="treeDemoDiv" style="overflow:auto;" class="layui-col-lg4 layui-col-md4 layui-col-sm6 layui-col-xs12 layui-col-lg-offset4 layui-col-md-offset4 layui-col-sm-offset3">';
html += ' <ul id="treeDemo" class="ztree"></ul>';
html += ' </div>';
html += ' <!--保存权限-->';
html += ' <div id="btnAuthorityUpdate" style="position:absolute;bottom:5px;border-top: 1px solid #e5e5e5;padding-top: 2px;text-align:center;left: 0px;right: 0px;">';
html += ' <input class="layui-btn " type="button" value="保 存" onclick="savePermissions()" >';
html += ' <input class="layui-btn layui-btn-primary" type="button" value="取 消" onclick="cancelPermissions()" >';
html += ' </div>';
html += '</div>';
return html;
}
实现树形展示并绑定数据js代码:
// 树形参数
var setting = {
check : {
enable : true,
chkDisabledInherit : true
},
data : {
simpleData : {
enable : true
}
}
};
//弹窗
var jurisdictionIndex = -1;
function OpenJurisdiction(roleId) {
var RoleID = roleId;// 角色ID
if (RoleID == null || RoleID == '' || RoleID < 0) {
layer.msg('请选择角色ID!')
return false;
}
selectRoleID = RoleID;
if (RoleID == 75) {
layer.msg('超级管理员不用分配权限!')
return false;
}else{
var html = getJurisdictionHmtl();
// 弹出即全屏
jurisdictionIndex = layer.open({
type : 1,
content : html,
title : '分配权限:',
area : [ '320px', '195px' ],
maxmin : false
});
layer.full(jurisdictionIndex);// 最大化
var loadIndex = layer.load(0, {
shade : 0.3
}); // 0代表加载的风格,支持0-2
$.ajax({
type : 'post',// 可选get
url : ctx + '/Jurisdiction/SelectModuleToRoleCondition.do',// 这里是接收数据的PHP程序
data : {
userid:selectRoleID
},// 传给PHP的数据,多个参数用&连接
dataType : 'Json',// 服务器返回的数据类型 可选XML ,Json jsonp script html text等
success : function(data, textStatus) {
layer.close(loadIndex);// 隐藏加载界面
var text = data.data;
var db = [];
if (data.data != null && data.data != '') {
db = eval(data.data);
}
for ( var int = 0; int < db.length; int++) {
db[int].id;
}
// 绑定树形
$.fn.zTree.init($("#treeDemo"), setting, db);
var clientHeight = window.document.documentElement.clientHeight;// 获取权限分配弹窗的内部高度
$('#userAuthorityUpdate').css('height',
(clientHeight - 43 - 10 - 33) + 'px');// 设置标签ID为"userAuthorityUpdate"的高度
$('#treeDemoDiv').css('height',
(clientHeight - 43 - 45 - 10 - 40) + 'px');// 设置用户权限树形的高度
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
layer.close(loadIndex);// 隐藏加载界面
// ajax提交失败的处理函数!
layer.msg('查询系统功能模块数据失败!');
}
});
}
}
成果展示: