LigerUI权限系统之角色管理

　　角色管理比前面几个页面都稍显复杂点。好吧，还是先看图。

　　左边是角色列表，右边是页面列表，它们也是多对多的关系，即一个角色可以访问多个页面，同时一个页面也可以被多个角色访问。

　　点击左边的角色，刷新右边页面列表，显示已为其分配的页面，若想取消某个页面，只要把前面的勾去掉，然后保存就可以了。

　　删除该角色下的用户这个有点麻烦，从ligerUI提供的demo及api来看是无法从子级往上找到父级元素的，于是我想到用Jquery，从当前点击这个元素往上找到父级，很遗憾，通过ligerUI grid生成的子级HTML元素完全是一样的，没有用于区别的id和属性，所以也就无法确定父级。后来，突然灵感一闪，既然可以通过父级的参数值来加载子级，那么就可以把这个父级参数值再返回绑定到子级上，只不过把它隐藏一下就可以了。OK，这个问题就解决了。

　　前端完整代码：

  1 @section headerScripts{
  2     <style type="text/css">
  3         #grid {
  4             margin: 5px 10px 0 10px;
  5         }
  6     </style>
  7
  8     <script type="text/javascript">
  9         var UrlRoleDataSource = '@Url.Action("RoleDataSource")';
 10         var UrlRoleDetail = '@Url.Action("RoleDetail")';
 11         var UrlAddRole = '@Url.Action("AddRole")';
 12         var UrlModifyRole = '@Url.Action("ModifyRole")';
 13         var UrlDeleteRole = '@Url.Action("DeleteRole")';
 14         var UrlMenuDataSource = '@Url.Action("MenuDataSource")';
 15         var UrlAttachRoleToMenu = '@Url.Action("AttachRoleToMenu")';
 16         var UrlGetMenuByRoleId = '@Url.Action("GetMenuByRoleId")';
 17         var UrlDeleteUserFromRole = '@Url.Action("DeleteUserFromRole")';
 18
 19
 20         var detailGrid;
 21         var menugrid;
 22         var rids = [];
 23
 24         var DeleteUser;
 25
 26         $(function () {
 27             InitLayOut();
 28             InitGrid();
 29             InitMenuGrid();
 30         });
 31
 32         function InitLayOut() {
 33             $("#layout").ligerLayout({
 34                 rightWidth: 452,
 35                 height: '100%',
 36                 heightDiff: 14,
 37                 space: 4,
 38                 allowRightCollapse: false
 39             });
 40         }
 41
 42
 43         function InitGrid() {
 44             $("#grid").ligerGrid({
 45                 columns: [
 46                 { display: '角色ID', name: 'roleid', align: 'center', width: '48%' },
 47                 { display: '角色名称', name: 'rolename', align: 'center', width: '48%' }
 48                 ],
 49                 width: '98%',
 50                 pageSizeOptions: [10, 30, 50],
 51                 height: '98%',
 52                 detailHeight: 'auto',
 53                 rowHeight: '30',
 54                 headerRowHeight: '33',
 55                 url: UrlRoleDataSource,
 56                 alternatingRow: true,
 57                 onSelectRow: selectedRow,
 58                 toolbar: {
 59                     items: [
 60                    { text: '增加', click: AddRole, img: '@Url.Content("~/Content/LigerUI/icons/add.gif")' },
 61                    { line: true },
 62                    { text: '修改', click: ModifyRole, img: '@Url.Content("~/Content/LigerUI/icons/modify.gif")' },
 63                    { line: true },
 64                    { text: '删除', click: DeleteRole, img: '@Url.Content("~/Content/LigerUI/icons/delete.gif")' }
 65                     ]
 66                 },
 67               detail: { onShowDetail: DetailInit }
 68           }
 69             );
 70
 71
 72            function selectedRow() {
 73                var grid = $("#grid").ligerGrid();
 74                var row = grid.getSelectedRow();
 75                $.get(UrlGetMenuByRoleId, { roleId: row.roleid }, function (data) {
 76                    rids = data;
 77                    menugrid.reload();
 78                });
 79            }
 80
 81            function DetailInit(row, detailPanel, callback) {
 82                var grid = document.createElement('div');
 83                $(detailPanel).append(grid);
 84                detailGrid = $(grid).css('margin', 10).ligerGrid({
 85                    columns: [
 86                                { display: '账号', name: 'userid' },
 87                                { display: '姓名', name: 'name' },
 88                                { display: '所属角色ID', name: 'roleid', hide: 'hide', width: 10 },
 89                                {
 90                                    display: '操作', isSort: false, width: 120, render: function (rowdata, rowindex, value) {
 91
 92                                        return "<a style=\"color:black;\" href='javascript:DeleteUser(\"" + rowdata.userid + "\",\"" + rowdata.roleid + "\")'>删除</a>";
 93                                    }
 94                                }
 95                    ],
 96                    isScroll: true,
 97                    showToggleColBtn: false,
 98                    width: '95%',
 99                    url: UrlRoleDetail,
100                    parms: { roleId: row.roleid },
101                    showTitle: false,
102                    columnWidth: 250,
103                    rowHeight: '30',
104                    headerRowHeight: '33',
105                    onAfterShowData: callback,
106                    frozen: false
107                });
108            }
109
110            function AddRole() {
111
112                if (!window.addWin) {
113                    window.addWin = $.ligerDialog.open({
114                        target: $("#winAdd"),
115                        height: 260,
116                        width: 400,
117                        title: "增加角色",
118                        isHidden: false
119                    });
120
121                    $("#btnCancel").click(function () {
122                        window.addWin.hide();
123                    });
124
125                    $("#btnConfirm").click(function () {
126
127                        var roleId = $("#txtRoleId").val();
128                        var roleName = $("#txtRoleName").val();
129
130                        if (roleId == "" || roleName == "") {
131                            alert("角色ID和名称不能为空！");
132                            return;
133                        }
134
135                        $.post(UrlAddRole,
136                            { roleId: roleId, roleName: roleName },
137                            function (data) {
138                                if (data.result) {
139                                    alert("操作成功！");
140                                    $("#grid").ligerGrid().reload();
141                                } else {
142                                    alert(data.msg);
143                                }
144                            });
145                    });
146                } else {
147                    window.addWin.show();
148                }
149            }
150            function ModifyRole() {
151                var grid = $("#grid").ligerGrid();
152                var row = grid.getSelectedRow();
153                if (row == null) {
154                    alert("请选择一条数据");
155                    return;
156                }
157                $("#winModify").data("roleid", row.roleid);
158                $("#winModify").data("rolename", row.rolename);
159
160                if (!window.modifyWin) {
161                    window.modifyWin = $.ligerDialog.open({
162                        target: $("#winModify"),
163                        height: 250,
164                        width: 400,
165                        title: "修改角色"
166                    });
167
168                    $("#txtModifyRoleId").val($("#winModify").data("roleid"));
169                    $("#txtModifyRoleName").val($("#winModify").data("rolename"));
170
171                    $("#btnModifyCancel").click(function () {
172                        window.modifyWin.hide();
173                    });
174
175                    $("#btnModifyConfirm").click(function () {
176
177                        var roleId = $("#txtModifyRoleId").val();
178                        var roleName = $("#txtModifyRoleName").val();
179
180                        if (roleName == "") {
181                            alert("角色名称不能为空！");
182                            return;
183                        }
184
185                        $.post(UrlModifyRole, { roleId: roleId, roleName: roleName }, function (data) {
186                            if (data.result) {
187                                alert("操作成功！");
188                                $("#grid").ligerGrid().reload();
189                            } else {
190                                alert(data.msg);
191                            }
192                        });
193                    });
194                } else {
195                    $("#txtModifyRoleId").val($("#winModify").data("roleid"));
196                    $("#txtModifyRoleName").val($("#winModify").data("rolename"));
197                    window.modifyWin.show();
198                }
199            }
200            function DeleteRole() {
201                var grid = $("#grid").ligerGrid();
202                var row = grid.getSelectedRow();
203                if (row == null) {
204                    alert("请选择一条数据");
205                    return;
206                }
207                if (confirm("是否确定删除？")) {
208                    $.post(UrlDeleteRole, { roleId: row.roleid }, function (data) {
209                        if (data.result) {
210                            alert("删除成功！");
211                            $("#grid").ligerGrid().reload();
212                        } else {
213                            alert(data.msg);
214                        }
215                    });
216                }
217            }
218
219            DeleteUser = function (userid,roleid) {
220
221                if (confirm("是否确定删除？")) {
222                    $.post(UrlDeleteUserFromRole, { userId: userid, roleId: roleid }, function (data) {
223                        if (data.result) {
224                            alert("删除成功！");
225                            detailGrid.reload();
226                        } else {
227                            alert(data.msg);
228                        }
229                    });
230                }
231            }
232        }
233
234        function InitMenuGrid() {
235            menugrid = $("#menugrid").ligerGrid({
236                columns: [
237                { display: '页面名称', name: 'name', align: 'center', width: '90%' },
238                { display: '页面名称', name: 'rid', align: 'center', width: '2%', hide: 'hide' }
239                ],
240                width: '98%',
241                pageSizeOptions: [10, 30, 50],
242                height: '98%',
243                rowHeight: '30',
244                headerRowHeight: '33',
245                url: UrlMenuDataSource,
246                alternatingRow: true,
247                checkbox: true,
248                isChecked: function (rowdata) {
249                    if (rids.length == 0) {
250                        return false;
251                    }
252                    else {
253                        var temp = 0;
254                        for (var i = 0; i < rids.length; i++) {
255                            if (rowdata.rid == rids[i]) {
256                                break;
257                            }
258                            temp++;
259                        }
260                        if (temp == rids.length) {
261                            return false;
262                        } else {
263                            return true;
264                        }
265                    }
266                },
267                toolbar: {
268                    items: [
269                   { text: '保存', click: Save, img: '@Url.Content("~/Content/LigerUI/icons/ok.gif")' },
270                    { line: true },
271                    ]
272                }
273            });
274
275            function Save() {
276                if (confirm("是否确定保存？")) {
277                    var grid = $("#grid").ligerGrid();
278                    var row = grid.getSelectedRow();
279                    if (row == null) {
280                        alert("请选择角色");
281                        return;
282                    }
283                    var temp = menugrid;
284                    var menurows = menugrid.getSelectedRows();
285                    if (menurows.length == 0) {
286                        alert("请选择页面");
287                        return;
288                    }
289                    var menus = [];
290                    for (var i = 0; i < menurows.length; i++) {
291                        menus.push(menurows[i].rid);
292                    }
293                    var params = { roleId: row.roleid, menus: menus };
294
295                    $.ajax({
296                        type: "POST",
297                        url: UrlAttachRoleToMenu,
298                        data: params,
299                        success: function (data) {
300                            if (data.result) {
301                                alert("操作成功！");
302                            } else {
303                                alert(data.msg);
304                            }
305                        },
306                        dataType: "json",
307                        traditional: true
308                    });
309                }
310
311            }
312        }
313     </script>
314 }
315
316 <div id="layout">
317     <div position="center" title="角色列表">
318         <div id="grid"></div>
319     </div>
320     <div position="right" title="页面列表">
321         <div id="menugrid"></div>
322     </div>
323 </div>
324
325
326
327
328 <div id="winAdd" style="display: none;">
329     <table class="tb" style="height: 170px;">
330         <tr class="tr">
331             <td class="td">角色ID：</td>
332             <td>
333                 <input id="txtRoleId" /></td>
334         </tr>
335         <tr class="tr">
336             <td class="td">角色名称：</td>
337             <td>
338                 <input id="txtRoleName" type="text" /></td>
339         </tr>
340         <tr class="tr">
341             <td colspan="2">
342                 <button id="btnConfirm" class="ui-button">确定</button>
343                 <button id="btnCancel" class="ui-button">取消</button>
344             </td>
345         </tr>
346     </table>
347 </div>
348
349 <div id="winModify" style="display: none;">
350     <table class="tb" style="height: 170px;">
351         <tr class="tr">
352             <td class="td">角色ID：</td>
353             <td>
354                 <input id="txtModifyRoleId" readonly="true" /></td>
355         </tr>
356         <tr class="tr">
357             <td class="td">角色名称：</td>
358             <td>
359                 <input id="txtModifyRoleName" type="text" /></td>
360         </tr>
361         <tr class="tr">
362             <td colspan="2">
363                 <button id="btnModifyConfirm" class="ui-button">确定</button>
364                 <button id="btnModifyCancel" class="ui-button">取消</button>
365             </td>
366         </tr>
367     </table>
368 </div>

View Code

　　后端完整代码：

  1   public class RoleController : Controller
  2     {
  3         //
  4         // GET: /Role/
  5
  6         private IRoleRepository _roleRepository;
  7         private IOrgRepository _orgRepository;
  8         private IMenuRepository _menuRepository;
  9
 10         public RoleController(IRoleRepository roleRepository, IOrgRepository orgRepository, IMenuRepository menuRepository)
 11         {
 12
 13             this._roleRepository = roleRepository;
 14             this._orgRepository = orgRepository;
 15             this._menuRepository = menuRepository;
 16         }
 17
 18         public ActionResult Index()
 19         {
 20             return View();
 21         }
 22
 23         public JsonResult RoleDataSource()
 24         {
 25             var data = _roleRepository.GetAll().ToList();
 26
 27             return Json(new
 28             {
 29                 Rows = data.Select(m => new
 30                 {
 31                     roleid = m.roleid,
 32                     rolename = m.rolename
 33
 34                 }),
 35                 Total = data.Count()
 36             }, JsonRequestBehavior.AllowGet);
 37         }
 38
 39         public JsonResult RoleDetail(int roleId)
 40         {
 41             var data = _roleRepository.GetUserByRoleId(roleId).ToList();
 42
 43             return Json(new
 44             {
 45                 Rows = data.Select(m => new
 46                 {
 47                     userid = m.userid,
 48                     name = m.name,
 49                     roleid = roleId
 50                 }),
 51                 Total = data.Count()
 52             }, JsonRequestBehavior.AllowGet);
 53         }
 54
 55         public JsonResult AddRole(int roleId, string roleName)
 56         {
 57             var check = _roleRepository.GetRoleByConditon(roleId, roleName);
 58
 59             if (check.Count() > 1)
 60             {
 61                 return Json(new { result = false, msg = "添加失败，不能重复添加相同的角色！" }, JsonRequestBehavior.AllowGet);
 62             }
 63
 64             try
 65             {
 66                 var role = new t_role
 67                 {
 68                     roleid = roleId,
 69                     rolename = roleName
 70                 };
 71                 var result = _roleRepository.AddRole(role);
 72                 if (result)
 73                 {
 74                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
 75                 }
 76                 else
 77                 {
 78                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
 79                 }
 80             }
 81             catch (Exception ex)
 82             {
 83                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
 84             }
 85         }
 86
 87         public JsonResult ModifyRole(int roleId, string roleName)
 88         {
 89             var check = _roleRepository.GetRoleByConditon(roleId, roleName);
 90
 91             if (check.Count() > 1)
 92             {
 93                 return Json(new { result = false, msg = "添加失败，不能修改为相同的角色！" }, JsonRequestBehavior.AllowGet);
 94             }
 95
 96             try
 97             {
 98                 var role = new t_role
 99                 {
100                     roleid = roleId,
101                     rolename = roleName
102                 };
103                 var result = _roleRepository.ModifyRole(role);
104                 if (result)
105                 {
106                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
107                 }
108                 else
109                 {
110                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
111                 }
112             }
113             catch (Exception ex)
114             {
115                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
116             }
117         }
118
119         public JsonResult DeleteRole(int roleId)
120         {
121             var role = new t_role
122             {
123                 roleid = roleId
124
125             };
126
127             try
128             {
129                 var result = _roleRepository.DeleteRole(role);
130                 if (result)
131                 {
132                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
133                 }
134                 else
135                 {
136                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
137                 }
138             }
139             catch (Exception ex)
140             {
141                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
142             }
143         }
144
145         public JsonResult MenuDataSource()
146         {
147
148             var data = _menuRepository.GetMenuAll().ToList();
149
150             return Json(new { Rows = data.Select(m => new { name = m.name, rid = m.rid }), Total = data.Count() }, JsonRequestBehavior.AllowGet);
151         }
152
153         public JsonResult AttachRoleToMenu(int roleId, List<int> menus)
154         {
155             try
156             {
157                 var result = _roleRepository.AttachRoleToMenu(roleId, menus);
158                 if (result)
159                 {
160                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
161                 }
162                 else
163                 {
164                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
165                 }
166             }
167             catch (Exception ex)
168             {
169                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
170             }
171         }
172
173         public JsonResult GetMenuByRoleId(int roleId)
174         {
175             var data = _roleRepository.GetMenuByRoleId(roleId).Select(m=>m.rid).ToArray();
176
177             return Json(data,JsonRequestBehavior.AllowGet);
178         }
179
180         public JsonResult DeleteUserFromRole(string userId,int roleId) {
181
182             try
183             {
184                 var result = _roleRepository.DeleteUserFromRole(userId,roleId);
185                 if (result)
186                 {
187                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
188                 }
189                 else
190                 {
191                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
192                 }
193             }
194             catch (Exception ex)
195             {
196                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
197             }
198         }
199     }

View Code

转载于:https://www.cnblogs.com/qiuyan/p/3236152.html

LigerUI权限系统之角色管理相关推荐

【ITOO高校云平台】——浅析权限系统中角色与职位
[前言]在ITOO高校云平台中,权限管理,由于涉及到基础系统的数据,所以存在角色和职位这两个概念.针对两者的关系和区别,也一直是我们探讨的热点. 今天,在这里我们重新梳理一下. 一.角色角色是什么? ...
权限组件（6）：权限分配的角色管理
效果图: 为了方便开发,先把中间件注释掉,要不还要在角色-权限表中添加对应关系.又因为二级菜单和面包屑导航需要中间件的变量,所以要在layout.html里面把这两个也注释掉. setting.py ...
LigerUI权限系统之组织结构
先上图,再看代码.组织结构界面组织结构添加: 组织结构修改: 组织结构删除: 我在做这个页面的时候treegrid 的远程数据加载让我很头痛,从LigerUI官网提供的Demo来看,它是根据json ...
基于角色管理的系统访问控制
引言(Introduction) 1.1. 关键词定义(Definitions) 有关定义说明如下: 安全管理:计算机技术安全管理的范围很广,可以包括网络安全性.数据安全性.操作系统安全性以及应用程序 ...
项目实战之旅游网（五）后台角色管理（下）后台权限管理
目录一.后台角色管理(下) 1.查询角色权限 2.修改角色权限 3.优化侧边栏菜单二.后台权限管理 1.权限列表 2.新增权限 3.修改权限 4.删除权限一.后台角色管理(下) 1.查询角色权限 ...
保险后台管理系统/订单管理/保单管理/客户管理/咨询管理/保险原型/保单详情/客户详情/权限管理/部门管理/账号管理/保险系统原型/汽车保险后台管理系统/角色管理/咨询详情/axure原型/需求文档
保险后台管理系统/订单管理/保单管理/客户管理/咨询管理/保险原型/保单详情/客户详情/权限管理/部门管理/账号管理/保险系统原型/汽车保险后台管理系统/角色管理/咨询详情/axure原型/需求文档 ...
laravel entrust权限系统，管理角色添加删除用户
因为项目需要,在使用entrust权限中,要通过角色管理添加删除用户,在网上没有找到说明教程,然后通过自己看源码,找到了接近方法. 代码: $rid=1;//角色id$user=User::where ...
权限系统--角色管理
角色管理是单表操作的最后一个,其实也不能算是单表操作了,因为在添加角色时,就已经对角色授权了. 一:界面展示 1:主界面 2:添加界面 3:修改界面二:难点解析有所不同的是在添加角色是可以进行角色 ...
Oracle数据库的认证方法、用户管理、权限管理和角色管理等
1 Oracle认证方法操作系统身份认证网络身份认证 Oracle数据库身份认证数据库管理员认证操作系统认证方式如果采用操作系统认证方式,通常需要在操作系统中创建用户组,并且授予该组DBA权 ...
Oracle用户、权限、角色管理
Oracle 数据库用户管理 Oracle 权限设置一.权限分类: 系统权限:系统规定用户使用数据库的权限.(系统权限是对用户而言). 实体权限:某种权限用户对其它用户的表或视图的存取权限.(是针对 ...

LigerUI权限系统之角色管理

LigerUI权限系统之角色管理相关推荐

最新文章

热门文章