第4.1.2章 WEB系统最佳实践页面实例角色管理

最新推荐文章于 2024-06-25 09:47:11 发布

warrah

最新推荐文章于 2024-06-25 09:47:11 发布

阅读量1.8k

点赞数

分类专栏：岁月云——Web系统最佳实践文章标签： bootstrap 角色管理

本文链接：https://blog.csdn.net/warrah/article/details/53698657

版权

本文介绍了一个管理系统的角色管理页面设计，基于RBAC模型，包含角色的创建、编辑、删除以及权限和用户的分配。使用了bootstrap-table和ztree组件，详细讲解了各个功能的实现逻辑，如初始化角色列表、选中角色后的权限和用户显示、权限清单的刷新与保存等操作。

摘要由CSDN通过智能技术生成

大多数管理系统的权限设计都是基于基于角色的访问控制（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