基于easyUI实现权限管理系统（三）——角色管理
此文章是基于 EasyUI+Knockout实现经典表单的查看、编辑
一. 相关文件介绍
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) {
return function (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:8080/ims/sys/role.do，角色管理界面
2. 点击 编辑权限，菜单权限
3. 按钮权限
4. 点击 管理成员
基于easyUI实现权限管理系统（三）——角色管理的更多相关文章
- 基于easyUI实现权限管理系统（四）——用户管理
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. user.jsp:用户管理界面 <!DOCTYPE html PUBLIC "-//W3 ...
- 基于easyUI实现权限管理系统（二）——菜单导航
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. menu.jsp:菜单导航主界面 <!DOCTYPE html PUBLIC "-//W ...
- 基于easyUI实现权限管理系统（一）一—组织结构树图形
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 相关文件介绍 1. organize.jsp:组织结构树的主界面 <!DOCTYPE html PUBLIC &quo ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（26）-权限管理系统-分配角色给用户
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(26)-权限管理系统-分配角色给用户 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——菜单模块的实现（二）
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一) 菜单和模块是在同一个表中,采用的是树形结构,模块菜单表结构如下代码: USE [Permis ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计（一）
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...
- （转）ASP.NET MVC4+EasyUI+EntityFrameWork权限管理系统——数据库的设计（一）
原文地址:http://www.cnblogs.com/cmsdn/p/3371576.html 快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一 ...
- LigerUI权限系统之角色管理
角色管理比前面几个页面都稍显复杂点.好吧,还是先看图. 左边是角色列表,右边是页面列表,它们也是多对多的关系,即一个角色可以访问多个页面,同时一个页面也可以被多个角色访问. 点击左边的角色,刷新右边页 ...
- Oracle+FluentData+MVC4+EasyUI开发权限管理系统之开篇
在园子里有很多EF+MVC+EasyUI的框架实在是太多了,经过在一段时间的学习高手写的思路,但是都是针对Sql数据的,但是今年我当上研发组组长的第一个任务就是编写一个通用平台框架,一刚开始想把学习过 ...
随机推荐
- 洛谷T46780 ZJL 的妹子序列（生成函数）
题面 传送门 题解 这居然是一道语文题? 首先不难看出,因为每一次相邻元素交换最多减少一个逆序对,所以至少\(m\)次交换就代表这个序列的逆序对个数为\(m\) 我们考虑一下,假设现在已经放完了\(i ...
- 关于jxl的getCellFormat()方法获取表格样式----中文货币乱码
File templateFile = getTempalte(client.getSc_shortName());//这里读取模板文件 WorkbookSettings set1 = new Wor ...
- easy-ui grid里的toobar按钮隐藏与显示
//隐藏第一个按钮$('div.datagrid-toolbar a').eq(0).hide();//隐藏第一条分隔线$('div.datagrid-toolbar div').eq(0).hide ...
- Linux kill 指定进程名的四种方式
方法1 pkill 进程名 方法2 killall 进程名 方法3 kill -9 $(ps -ef|grep 进程名关键字|grep -v grep|awk '{print $2}') 这个是利用管 ...
- 从零开始完整搭建 Spring-Boot 项目开发框架的教程
前言 难度:简单 类型:step-by-step 适用:初学者,完全没有接触过 Spring-Boot 开发环境:jdk 1.8 关键词:java, sring-boot, spring-mvc, r ...
- mysql 存储过程和游标
CREATE DEFINER=`root`@`localhost` PROCEDURE `NewProc`() BEGIN #Routine body goes here... DECLARE ite ...
- tomcat正常启动后http://localhost:8080/报错404
病症: tomcat在eclipse里面能正常启动,而在浏览器中访问http://localhost:8080/不能访问,且报404错误.同时其他项目页面也不能访问.关闭eclipse里面的tomca ...
- 【算法笔记】B1050 螺旋矩阵
1050 螺旋矩阵 (25 分) 本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行 ...
- 知了课堂 Python Flask零基础 笔记整理
目录 起步 安装Python2.7: Python虚拟环境介绍与安装: pip安装flask: 认识url: URL详解 web服务器和应用服务器以及web应用框架: Flask 第一个flask程序 ...
- # js设置键名和键值de坑
js设置键名和键值 let obj1 = {'jifeng': 60, 'lilu': 59, 'hongyan': 51, 'donghan': 4, 'liudan': 18, 'liuhaiya ...