基于easyUI实现权限管理系统（三）——角色管理
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于easyUI实现权限管理系统（三）——角色管理，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含15160字，纯文字阅读大概需要22分钟。
内容图文
此文章是基于
一. 准备工作
1. 点击此下载相关文件，并把文件放到 ims 工程对应的文件夹下
二. 相关文件介绍
1. role.jsp：角色管理界面
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>
<%
@ page language
=
"
java
"
contentType
=
"
text/html; charset=UTF-8
"
pageEncoding
=
"
UTF-8
"
%>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
>
<
title
>角色管理</title><%@ include file="/common/head.jsp"%></head><body><div class="toolbar"><a href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a><a href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a><a href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" data-bind="click:editClick" title="编辑">编辑</a><a href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a><a href="#" plain="true" class="easyui-linkbutton" icon="icon-save" data-bind="click:saveClick" title="保存">保存</a></div><table id="gridlist" data-bind="datagrid:grid"><thead><tr><th field="id" hidden="true"></th><th field="roleName" align="left" width="150" editor="{type:‘validatebox‘,options:{required: true }}">角色名称</th><th field="roleSeq" align="left" width="100" editor="text">排序 </th><th field="description" align="left" width="200" editor="text">描述 </th><th field="permit" align="center" width="200" formatter="formatterPermit">操作 </th></tr></thead></table><script type="text/html" id="permission-template"><div class="container" style="margin:5px;height:525px;"><div><span class="icon32 icon-group32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:role.roleName">角色名称</span> <span data-bind="text:role.description" style="margin-left:10px;"></span></div><div class="easyui-tabs" data-bind="easyuiTabs:tab"><div title="菜单权限"><table id="gridlist" data-bind="treegrid:grid"><thead><tr><th field="chk" checkbox="true"></th><th field="menuName" align="left" width="150">菜单 </th> <!--<th field="id" align="left" width="80">编码 </th> --><th field="description" align="left" width="200">备注说明 </th> </tr> </thead> </table> </div><div title="按钮权限"><table data-bind="treegrid:grid2"></table> </div></div> </div><div style="text-align:center;clear:both"><a class="easyui-linkbutton" data-options="iconCls:‘icon-ok‘" data-bind="click:confirmClick" href="javascript:void(0)">确定</a> <a class="easyui-linkbutton" data-options="iconCls:‘icon-cancel‘" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> </div></script><script type="text/html" id="members-template"><div style="margin:5px;"><div style="border-bottom:1px solid #CCC; margin-bottom:5px;"><span id="role_name" class="icon32 icon-group32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:roleName">角色名称</span> </div><div style="margin-bottom:10px;height:20px;"><label>描述：</label><input data-bind="value:description" type="text" readonly=true class="z-txt" style="width:430px;color:#666;vertical-align:middle"></div><div> 成员：</div><select id="user_groups" data-bind="options:members,optionsText:memberText ,value:selectValue" size="10" style="width:475px; line-height:30px;height:195px;padding:5px"></select><div style="margin-top:2px;"><a href="#" class="easyui-linkbutton" id="group_add" plain="true" iconCls="icon-group-add" data-bind="click:addClick">添加</a><a href="#" class="easyui-linkbutton" id="group_delete" plain="true" iconcls="icon-group-delete" data-bind="click:deleteClick">删除</a><a href="#" class="easyui-linkbutton" id="group_clear" plain="true" iconCls="icon-clear" data-bind="click:clearClick">清空</a></div></div><div style="text-align:center;"><a class="easyui-linkbutton" data-options="iconCls:‘icon-ok‘" data-bind="click:confirmClick" href="javascript:void(0)">确定</a> <a class="easyui-linkbutton" data-options="iconCls:‘icon-cancel‘" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> </div></script><script type="text/html" id="choose-members-template"><div style="margin:5px;height:425px;overflow:auto;"><div style="border-bottom:1px solid #CCC; margin-bottom:5px;"><span class="icon32 icon-org32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">
机构成员<input type="checkbox" style="vertical-align:middle;margin-left:5px;" data-bind="checked:checkAllOrganize"/>全选</span></div><ul style="margin:0;padding:0;clear:both" data-bind="foreach:organizes"><li style="float:left;list-style:none;margin:3px;"><input type="checkbox" data-bind="value:id,checked:checked" style="vertical-align:middle"/><label data-bind="text:organizeName" ></label></li></ul><div style="border-bottom:1px solid #CCC; margin-bottom:5px;clear:both"><span class="icon32 icon-user32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;">
用户成员<input type="checkbox" style="vertical-align:middle;margin-left:5px;" data-bind="checked:checkAllUser"/>全选</span></div><ul style="margin:0;padding:0;clear:both" data-bind="foreach:users"><li style="float:left;list-style:none;margin:3px;"><input type="checkbox" data-bind="value:id,checked:checked" style="vertical-align:middle"/><label data-bind="text:userName"></label></li></ul></div><div style="text-align:center;clear:both"><a class="easyui-linkbutton" data-options="iconCls:‘icon-ok‘" data-bind="click:confirmClick" href="javascript:void(0)">确定</a> <a class="easyui-linkbutton" data-options="iconCls:‘icon-cancel‘" data-bind="click:cancelClick" href="javascript:void(0)">取消</a> </div></script><%@ include file="/common/foot.jsp"%><script src="viewModel/sys/role.js"></script><script type="text/javascript">
using([‘validatebox‘,‘messager‘,‘dialog‘]);
var data = ${model};
ko.bindingViewModel(new viewModel(data));
var formatterPermit =function (value, row) {
var html =‘<a href="javascript:;" onclick=\‘permissionTab(‘+ JSON.stringify(row) +‘)\‘><span class="icon icon-set1"> </span>[编辑权限]</a>‘;
html +=‘<a href="javascript:;" onclick=\‘memberDialog(‘+ JSON.stringify(row) +‘)\‘ style="margin-left:10px"><span class="icon icon-users "> </span>[管理成员]</a>‘;
return html;
};
</script></body></html>
2. role.js：实现角色管理功能、列表，编辑权限、管理成员功能
function
viewModel() {
var self = this;
this.grid = {
size: { w: 4, h: 40 },
url: rootPath+‘/sys/role!list.do‘,
queryParams: ko.observable(),
loadFilter: function (d) {
return {rows:d,total:d.length};
}
};
this.gridEdit = new com.editGridViewModel(self.grid);
this.grid.onDblClickRow = self.gridEdit.begin;
this.grid.onClickRow = self.gridEdit.ended;
this.refreshClick = function () {
window.location.reload();
};
this.addClick = function () {
self.gridEdit.addnew({});
};
this.editClick = function () {
var row = self.grid.datagrid(‘getSelected‘);
var index = self.grid.datagrid(‘getRowIndex‘, row);
self.gridEdit.begin(index, row);
};
this.deleteClick = self.gridEdit.deleterow;
this.saveClick = function () {
self.gridEdit.ended();
var post = {};
post.list = self.gridEdit.getChanges([‘id‘, ‘roleName‘, ‘roleSeq‘, ‘description‘]);
if (self.gridEdit.ended() && post.list._changed) {
com.ajax({
url: rootPath+‘/sys/role!edit.do‘,
data: ko.toJSON(post),
success: function (d) {
com.message(‘success‘, ‘保存成功！‘);
self.grid.queryParams({});
}
});
}
};
}
var permissionTab = function (row) {
com.dialog({
title: "角色授限",
width: 800,
height: 600,
html: "#permission-template",
viewModel: function (win) {
var self = this;
this.role = ko.mapping.fromJS(row);
this.tab = {
onSelect: function (title, index) {
if (title == ‘按钮权限‘) {
//取得菜单权限中的选中行，并重新加开到按钮权限列表中var temp = {},data = [],panel = self.grid2.treegrid(‘getPanel‘);
utils.eachTreeRow(self.grid.treegrid(‘getData‘), function (node) {
if (node.checked) {
data.push(utils.filterProperties(node, [‘children‘, ‘description‘], true));
temp[node.id] = node;
}
});
self.grid2.treegrid(‘loadData‘, data);
//checkbox点击处理函数var checkHandler = function (obj,value) {
if (!obj.length) return;
var map = { "0": rootPath+"/content/images/checknomark.gif", "1": rootPath+"/content/images/checkmark.gif" };
obj.attr("src", map[value]).attr("value", value);
temp[obj.attr("menuId")]["btn_" + obj.attr("buttonId")] = parseInt(obj.attr("value"));
};
//注册checkbox点击事件
panel.find("td[field]").unbind("click").click(function () {
var img = $(this).find("img"), value = img.attr("value") == "1" ? "0" : "1";
checkHandler(img, value);
if (img.attr("buttonId")== "_checkall")
panel.find("img[menuId=" + img.attr("menuId") + "]").each(function () {
checkHandler($(this), value);
});
});
//注册全选checkbox的事件
panel.find(".datagrid-header .icon-chk_unchecked").unbind("click").click(function () {
var chk = $(this),
value = chk.hasClass("icon-chk_checked") ? "0" : "1",
iconcls = chk.hasClass("icon-chk_checked") ? "icon-chk_unchecked" : "icon-chk_checked";
chk.removeClass("icon-chk_unchecked").removeClass("icon-chk_checked").addClass(iconcls);
panel.find("img").each(function () {
checkHandler($(this), value);
});
});
}
}
};
this.grid = {
height: 460,
width: 774,
url: rootPath+‘/sys/menu!getEnabled.do?roleId=‘+row.id,
idField: ‘id‘,
queryParams: ko.observable(),
treeField: ‘menuName‘,
singleSelect: false,
onCheck: function (node) {
node.checked = true;
},
onUncheck: function (node) {
node.checked = false;
},
onCheckAll:function(rows){
utils.eachTreeRow(rows, function (node) { node.checked = true; });
},
onUncheckAll: function (rows) {
utils.eachTreeRow(rows, function (node) { node.checked = false; });
},
loadFilter: function (d) {
var formatterChk = function (buttonId) {
returnfunction (value, row) {
if (value >= 0)
return ‘<img menuId="‘ + row.id + ‘" buttonId="‘ + buttonId + ‘" value="‘ + value + ‘" src="‘ + rootPath + ‘/content/images/‘ + (value ? "checkmark.gif" : "checknomark.gif") + ‘"/>‘;
};
}
var cols = [[]];
for (var i in d.buttons)
cols[0].push({ field: ‘btn_‘+d.buttons[i].id, width: 50, align: ‘center‘, title: utils.formatString(‘<span class="icon {1}">{0}</span>‘, d.buttons[i].buttonName, d.buttons[i].buttonIcon), formatter: formatterChk(d.buttons[i].id) });
self.grid2.columns(cols);
return utils.toTreeData(d.menus, ‘id‘, ‘parentId‘, "children");
}
};
this.grid2 = {
height: 460,
width: 774,
idField: ‘id‘,
treeField: ‘menuName‘,
frozenColumns: [[
{ field: ‘menuName‘, width: 150, title: ‘菜单‘ },
{
field: ‘btn__checkall‘,
width: 50,
align: ‘center‘,
title: ‘<span class="icon icon-chk_unchecked">全选</span>‘,
formatter: function (v, r) {
for (var i in r) {
if (i.indexOf("btn_") > -1 && r[i] > -1) {
return ‘<img menuId="‘ + r.id + ‘" buttonId="_checkall" src="‘ + rootPath + ‘/content/images/‘ + (v ? "checkmark.gif" : "checknomark.gif") + ‘"/>‘;
}
}
}
}
]],
columns: ko.observableArray(),
loadFilter: function (d) {
return utils.toTreeData(d, ‘id‘, ‘parentId‘, "children");
}
};
this.confirmClick = function () {
var post = {menus:[],buttons:[]};
utils.eachTreeRow(self.grid.treegrid(‘getData‘),function(node){
if (node.checked) {
//1 取得菜单权限数据 post.menus.push({ menuId: node.id });
//2 取得按钮权限数据for (var btn in node)
if (btn.substr(0, 4) == ‘btn_‘ && node[btn] == ‘1‘ && btn != ‘btn__checkall‘)
post.buttons.push({ menuId: node.id, buttonId: btn.split(‘_‘)[1]});
}
});
com.ajax({
url: rootPath+‘/sys/role!editPermission.do?roleId=‘ + row.id,
data: ko.toJSON(post),
success: function (d) {
self.cancelClick();
com.message(‘success‘, ‘保存成功！‘);
}
});
};
this.cancelClick = function () {
win.dialog(‘close‘);
};
}
})
}
var memberDialog = function (row) {
var users = data.users;
var organizes = data.organizes;
com.dialog({
title: "管理成员",
width: 500,
height: 400,
html: "#members-template",
viewModel: function (win) {
var self = this;
this.members = ko.observableArray([]);
this.memberText = function (item) {
return utils.formatString(‘[{0}] {1}‘, item.memberType == ‘user‘ ? ‘用户‘ : ‘机构‘, item.memberName);
};
com.ajax({
type: ‘GET‘,
url: rootPath+‘/sys/role!getRoleMembers.do?roleId=‘ + row.id,
success: function (d) {
self.members(d);
}
});
this.roleName = utils.formatString("{0}", row.roleName);
this.description = row.description || " ";
this.addClick = function () {
com.dialog({
title: "选择成员",
width: 600,
height: 500,
html: "#choose-members-template",
viewModel: function (w) {
var that = this;
for (var i in users) users[i].checked = false;
for (var i in organizes) organizes[i].checked = false;
this.users = ko.mapping.fromJS(users);
this.organizes = ko.mapping.fromJS(organizes);
this.checkAllUser = ko.observable(false);
this.checkAllUser.subscribe(function (b) {
var list = that.users();
for (var i in list)
list[i].checked(b);
});
this.checkAllOrganize = ko.observable(false);
this.checkAllOrganize.subscribe(function (b) {
var list = that.organizes();
for (var i in list)
list[i].checked(b);
});
this.confirmClick = function () {
var userlist = this.users(),organizelist=this.organizes(),memberMap = {},members = ko.toJS(self.members);
for (var j in members)
memberMap[members[j].memberType + ‘|‘ + members[j].memberId] = true;
for (var i in userlist)
if (userlist[i].checked()) {
var item = { memberName: userlist[i].userName(), memberId: userlist[i].id(), memberType: ‘user‘ };
if (!memberMap[item.memberType + ‘|‘ +item.memberId]) self.members.push(item);
}
for (var i in organizelist)
if (organizelist[i].checked()) {
var item = { memberName: organizelist[i].organizeName(), memberId: organizelist[i].id(), memberType: ‘organize‘ };
if (!memberMap[item.memberType + ‘|‘ +item.memberId]) self.members.push(item);
}
this.cancelClick();
};
this.cancelClick = function () { w.dialog(‘close‘); };
}
});
};
this.selectValue = ko.observable();
this.deleteClick = function () {
if (this.selectValue()) {
self.members.remove(this.selectValue());
}
};
this.clearClick = function () {
self.members([]);
};
this.confirmClick = function () {
com.ajax({
url: rootPath+‘/sys/role!editRoleMembers.do?roleId=‘ + row.id,
data: ko.toJSON(self.members),
success: function (d) {
com.message(‘success‘, ‘保存成功！‘);
self.cancelClick();
}
});
};
this.cancelClick = function () { win.dialog(‘close‘); };
}
});
};
三. 效果图
1. 访问：http://localhost:8090/ims/sys/role.do，角色管理界面
2. 点击 编辑权限，菜单权限
3. 按钮权限
4. 点击 管理成员
原文：http://www.cnblogs.com/Mr-kevin/p/6610830.html
内容总结
以上是互联网集市为您收集整理的基于easyUI实现权限管理系统（三）——角色管理全部内容，希望文章能够帮你解决基于easyUI实现权限管理系统（三）——角色管理所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】