大多数管理系统的权限设计都是基于基于角色的访问控制(RBAC),下方的效果图中功能涉及创建、编辑、删除角色,为角色授予权限以及为角色添加对应的用户。这里将这些功能放在一个页面,主要目的是为了增加用户体验。
这个页面看似并不复杂,但是内涵的操作逻辑还是挺费脑子。
表格我采用的是bootstrap-table,
树控件我采用的是ztree
1 角色列表初始化时,默认选中第一条记录的权限和用户。
初始化角色表,加载完后触发事件,代码如下。
onLoadSuccess:function(data){
console.log(data);
if ($.isArray(data.rows) && data.total>0){
// 默认选中第一条角色记录
var firstRow = data.rows[0];
curRole = firstRow.id;
// 设置当前选择的角色标识
$('#txtRole').text(firstRow.name);
// 表格选中
mainGrid.bootstrapTable('check', 0);
} else{
// 默认角色为超级管理员
curRole = constant.admin;
}
if (userGrid == undefined){
// 当角色对应权限清单没有渲染时,初始化用户grid
console.log('开始执行 initUserGrid');
initUserGrid();
// 初始化权限树
initPermissionTree();
} else{
// 当角色表刷新时,触发用户清单和权限树的刷新。
refreshUser();
refreshPermission();
}
}
2 选中角色时,显示当前选中角色对应的权限和用户清单
这里用到了bootstrap table的行点击事件
onClickRow:function(item){
curRole = item.id;// 当前选中的角色
// 设置当前角色标识
$('#txtRole').text(item.name);
// 刷新用户清单
refreshUser();
// 刷新角色清单
refreshPermission();
}
3 初始化用户清单做了什么
下面的代码比较常规,没什么可讲的。
/**
* 初始化用户清单
*/
function initUserGrid(){
userGrid = $('#user-grid').bootstrapTable({
sidePagination:'server',cache:false,method:'post',url:ctx+'/ucsUser/selectByRole',queryParams:queryUserParams,contentType: 'application/x-www-form-urlencoded',
uniqueId:'id',sortName:'username',height:375,
pagination:true,pageNumber:1,pageSize:20,pageList:[20,30,50],search:false,
singleSelect:false,striped:true,clickToSelect:true,
columns