此文章是基于 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. 点击 管理成员