LigerUI权限系统之角色管理

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

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

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

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

　　前端完整代码：

 @section headerScripts{
     <style type="text/css">
         #grid {
             margin: 5px 10px  10px;
         }
     </style>
 
     <script type="text/javascript">
         var UrlRoleDataSource = '@Url.Action("RoleDataSource")';
         var UrlRoleDetail = '@Url.Action("RoleDetail")';
         var UrlAddRole = '@Url.Action("AddRole")';
         var UrlModifyRole = '@Url.Action("ModifyRole")';
         var UrlDeleteRole = '@Url.Action("DeleteRole")';
         var UrlMenuDataSource = '@Url.Action("MenuDataSource")';
         var UrlAttachRoleToMenu = '@Url.Action("AttachRoleToMenu")';
         var UrlGetMenuByRoleId = '@Url.Action("GetMenuByRoleId")';
         var UrlDeleteUserFromRole = '@Url.Action("DeleteUserFromRole")';
 
         var detailGrid;
         var menugrid;
         var rids = [];
 
         var DeleteUser;
 
         $(function () {
             InitLayOut();
             InitGrid();
             InitMenuGrid();
         });
 
         function InitLayOut() {
             $("#layout").ligerLayout({
                 rightWidth: ,
                 height: '100%',
                 heightDiff: ,
                 space: ,
                 allowRightCollapse: false
             });
         }
 
         function InitGrid() {
             $("#grid").ligerGrid({
                 columns: [
                 { display: '角色ID', name: 'roleid', align: 'center', width: '48%' },
                 { display: '角色名称', name: 'rolename', align: 'center', width: '48%' }
                 ],
                 width: '98%',
                 pageSizeOptions: [, , ],
                 height: '98%',
                 detailHeight: 'auto',
                 rowHeight: '',
                 headerRowHeight: '',
                 url: UrlRoleDataSource,
                 alternatingRow: true,
                 onSelectRow: selectedRow,
                 toolbar: {
                     items: [
                    { text: '增加', click: AddRole, img: '@Url.Content("~/Content/LigerUI/icons/add.gif")' },
                    { line: true },
                    { text: '修改', click: ModifyRole, img: '@Url.Content("~/Content/LigerUI/icons/modify.gif")' },
                    { line: true },
                    { text: '删除', click: DeleteRole, img: '@Url.Content("~/Content/LigerUI/icons/delete.gif")' }
                     ]
                 },
               detail: { onShowDetail: DetailInit }
           }
             );
 
            function selectedRow() {
                var grid = $("#grid").ligerGrid();
                var row = grid.getSelectedRow();
                $.get(UrlGetMenuByRoleId, { roleId: row.roleid }, function (data) {
                    rids = data;
                    menugrid.reload();
                });
            }
 
            function DetailInit(row, detailPanel, callback) {
                var grid = document.createElement('div');
                $(detailPanel).append(grid);
                detailGrid = $(grid).css('margin', ).ligerGrid({
                    columns: [
                                { display: '账号', name: 'userid' },
                                { display: '姓名', name: 'name' },
                                { display: '所属角色ID', name: 'roleid', hide: 'hide', width:  },
                                {
                                    display: '操作', isSort: false, width: , render: function (rowdata, rowindex, value) {
 
                                        return "<a style=\"color:black;\" href='javascript:DeleteUser(\"" + rowdata.userid + "\",\"" + rowdata.roleid + "\")'>删除</a>";
                                    }
                                }
                    ],
                    isScroll: true,
                    showToggleColBtn: false,
                    width: '95%',
                    url: UrlRoleDetail,
                    parms: { roleId: row.roleid },
                    showTitle: false,
                    columnWidth: ,
                    rowHeight: '',
                    headerRowHeight: '',
                    onAfterShowData: callback,
                    frozen: false
                });
            }
 
            function AddRole() {
 
                if (!window.addWin) {
                    window.addWin = $.ligerDialog.open({
                        target: $("#winAdd"),
                        height: ,
                        width: ,
                        title: "增加角色",
                        isHidden: false
                    });
 
                    $("#btnCancel").click(function () {
                        window.addWin.hide();
                    });
 
                    $("#btnConfirm").click(function () {
 
                        var roleId = $("#txtRoleId").val();
                        var roleName = $("#txtRoleName").val();
 
                        if (roleId == "" || roleName == "") {
                            alert("角色ID和名称不能为空！");
                            return;
                        }
 
                        $.post(UrlAddRole,
                            { roleId: roleId, roleName: roleName },
                            function (data) {
                                if (data.result) {
                                    alert("操作成功！");
                                    $("#grid").ligerGrid().reload();
                                } else {
                                    alert(data.msg);
                                }
                            });
                    });
                } else {
                    window.addWin.show();
                }
            }
            function ModifyRole() {
                var grid = $("#grid").ligerGrid();
                var row = grid.getSelectedRow();
                if (row == null) {
                    alert("请选择一条数据");
                    return;
                }
                $("#winModify").data("roleid", row.roleid);
                $("#winModify").data("rolename", row.rolename);
 
                if (!window.modifyWin) {
                    window.modifyWin = $.ligerDialog.open({
                        target: $("#winModify"),
                        height: ,
                        width: ,
                        title: "修改角色"
                    });
 
                    $("#txtModifyRoleId").val($("#winModify").data("roleid"));
                    $("#txtModifyRoleName").val($("#winModify").data("rolename"));
 
                    $("#btnModifyCancel").click(function () {
                        window.modifyWin.hide();
                    });
 
                    $("#btnModifyConfirm").click(function () {
 
                        var roleId = $("#txtModifyRoleId").val();
                        var roleName = $("#txtModifyRoleName").val();
 
                        if (roleName == "") {
                            alert("角色名称不能为空！");
                            return;
                        }
 
                        $.post(UrlModifyRole, { roleId: roleId, roleName: roleName }, function (data) {
                            if (data.result) {
                                alert("操作成功！");
                                $("#grid").ligerGrid().reload();
                            } else {
                                alert(data.msg);
                            }
                        });
                    });
                } else {
                    $("#txtModifyRoleId").val($("#winModify").data("roleid"));
                    $("#txtModifyRoleName").val($("#winModify").data("rolename"));
                    window.modifyWin.show();
                }
            }
            function DeleteRole() {
                var grid = $("#grid").ligerGrid();
                var row = grid.getSelectedRow();
                if (row == null) {
                    alert("请选择一条数据");
                    return;
                }
                if (confirm("是否确定删除？")) {
                    $.post(UrlDeleteRole, { roleId: row.roleid }, function (data) {
                        if (data.result) {
                            alert("删除成功！");
                            $("#grid").ligerGrid().reload();
                        } else {
                            alert(data.msg);
                        }
                    });
                }
            }
 
            DeleteUser = function (userid,roleid) {
 
                if (confirm("是否确定删除？")) {
                    $.post(UrlDeleteUserFromRole, { userId: userid, roleId: roleid }, function (data) {
                        if (data.result) {
                            alert("删除成功！");
                            detailGrid.reload();
                        } else {
                            alert(data.msg);
                        }
                    });
                }
            }
        }
 
        function InitMenuGrid() {
            menugrid = $("#menugrid").ligerGrid({
                columns: [
                { display: '页面名称', name: 'name', align: 'center', width: '90%' },
                { display: '页面名称', name: 'rid', align: 'center', width: '2%', hide: 'hide' }
                ],
                width: '98%',
                pageSizeOptions: [, , ],
                height: '98%',
                rowHeight: '',
                headerRowHeight: '',
                url: UrlMenuDataSource,
                alternatingRow: true,
                checkbox: true,
                isChecked: function (rowdata) {
                    if (rids.length == ) {
                        return false;
                    }
                    else {
                        var temp = ;
                        for (var i = ; i < rids.length; i++) {
                            if (rowdata.rid == rids[i]) {
                                break;
                            }
                            temp++;
                        }
                        if (temp == rids.length) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                },
                toolbar: {
                    items: [
                   { text: '保存', click: Save, img: '@Url.Content("~/Content/LigerUI/icons/ok.gif")' },
                    { line: true },
                    ]
                }
            });
 
            function Save() {
                if (confirm("是否确定保存？")) {
                    var grid = $("#grid").ligerGrid();
                    var row = grid.getSelectedRow();
                    if (row == null) {
                        alert("请选择角色");
                        return;
                    }
                    var temp = menugrid;
                    var menurows = menugrid.getSelectedRows();
                    if (menurows.length == ) {
                        alert("请选择页面");
                        return;
                    }
                    var menus = [];
                    for (var i = ; i < menurows.length; i++) {
                        menus.push(menurows[i].rid);
                    }
                    var params = { roleId: row.roleid, menus: menus };
 
                    $.ajax({
                        type: "POST",
                        url: UrlAttachRoleToMenu,
                        data: params,
                        success: function (data) {
                            if (data.result) {
                                alert("操作成功！");
                            } else {
                                alert(data.msg);
                            }
                        },
                        dataType: "json",
                        traditional: true
                    });
                }
 
            }
        }
     </script>
 }
 
 <div id="layout">
     <div position="center" title="角色列表">
         <div id="grid"></div>
     </div>
     <div position="right" title="页面列表">
         <div id="menugrid"></div>
     </div>
 </div>
 
 <div id="winAdd" style="display: none;">
     <table class="tb" style="height: 170px;">
         <tr class="tr">
             <td class="td">角色ID：</td>
             <td>
                 <input id="txtRoleId" /></td>
         </tr>
         <tr class="tr">
             <td class="td">角色名称：</td>
             <td>
                 <input id="txtRoleName" type="text" /></td>
         </tr>
         <tr class="tr">
             <td colspan="">
                 <button id="btnConfirm" class="ui-button">确定</button>
                 <button id="btnCancel" class="ui-button">取消</button>
             </td>
         </tr>
     </table>
 </div>
 
 <div id="winModify" style="display: none;">
     <table class="tb" style="height: 170px;">
         <tr class="tr">
             <td class="td">角色ID：</td>
             <td>
                 <input id="txtModifyRoleId" readonly="true" /></td>
         </tr>
         <tr class="tr">
             <td class="td">角色名称：</td>
             <td>
                 <input id="txtModifyRoleName" type="text" /></td>
         </tr>
         <tr class="tr">
             <td colspan="">
                 <button id="btnModifyConfirm" class="ui-button">确定</button>
                 <button id="btnModifyCancel" class="ui-button">取消</button>
             </td>
         </tr>
     </table>
 </div>

　　后端完整代码：

   public class RoleController : Controller
     {
         //
         // GET: /Role/ 
 
         private IRoleRepository _roleRepository;
         private IOrgRepository _orgRepository;
         private IMenuRepository _menuRepository;
 
         public RoleController(IRoleRepository roleRepository, IOrgRepository orgRepository, IMenuRepository menuRepository)
         {
 
             this._roleRepository = roleRepository;
             this._orgRepository = orgRepository;
             this._menuRepository = menuRepository;
         }
 
         public ActionResult Index()
         {
             return View();
         }
 
         public JsonResult RoleDataSource()
         {
             var data = _roleRepository.GetAll().ToList();
 
             return Json(new
             {
                 Rows = data.Select(m => new
                 {
                     roleid = m.roleid,
                     rolename = m.rolename
 
                 }),
                 Total = data.Count()
             }, JsonRequestBehavior.AllowGet);
         }
 
         public JsonResult RoleDetail(int roleId)
         {
             var data = _roleRepository.GetUserByRoleId(roleId).ToList();
 
             return Json(new
             {
                 Rows = data.Select(m => new
                 {
                     userid = m.userid,
                     name = m.name,
                     roleid = roleId
                 }),
                 Total = data.Count()
             }, JsonRequestBehavior.AllowGet);
         }
 
         public JsonResult AddRole(int roleId, string roleName)
         {
             var check = _roleRepository.GetRoleByConditon(roleId, roleName);
 
             if (check.Count() > )
             {
                 return Json(new { result = false, msg = "添加失败，不能重复添加相同的角色！" }, JsonRequestBehavior.AllowGet);
             }
 
             try
             {
                 var role = new t_role
                 {
                     roleid = roleId,
                     rolename = roleName
                 };
                 var result = _roleRepository.AddRole(role);
                 if (result)
                 {
                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
                 }
                 else
                 {
                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
                 }
             }
             catch (Exception ex)
             {
                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
             }
         }
 
         public JsonResult ModifyRole(int roleId, string roleName)
         {
             var check = _roleRepository.GetRoleByConditon(roleId, roleName);
 
             if (check.Count() > )
             {
                 return Json(new { result = false, msg = "添加失败，不能修改为相同的角色！" }, JsonRequestBehavior.AllowGet);
             }
 
             try
             {
                 var role = new t_role
                 {
                     roleid = roleId,
                     rolename = roleName
                 };
                 var result = _roleRepository.ModifyRole(role);
                 if (result)
                 {
                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
                 }
                 else
                 {
                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
                 }
             }
             catch (Exception ex)
             {
                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
             }
         }
 
         public JsonResult DeleteRole(int roleId)
         {
             var role = new t_role
             {
                 roleid = roleId
 
             };
 
             try
             {
                 var result = _roleRepository.DeleteRole(role);
                 if (result)
                 {
                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
                 }
                 else
                 {
                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
                 }
             }
             catch (Exception ex)
             {
                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
             }
         }
 
         public JsonResult MenuDataSource()
         {
 
             var data = _menuRepository.GetMenuAll().ToList();
 
             return Json(new { Rows = data.Select(m => new { name = m.name, rid = m.rid }), Total = data.Count() }, JsonRequestBehavior.AllowGet);
         }
 
         public JsonResult AttachRoleToMenu(int roleId, List<int> menus)
         {
             try
             {
                 var result = _roleRepository.AttachRoleToMenu(roleId, menus);
                 if (result)
                 {
                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
                 }
                 else
                 {
                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
                 }
             }
             catch (Exception ex)
             {
                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
             }
         }
 
         public JsonResult GetMenuByRoleId(int roleId)
         {
             var data = _roleRepository.GetMenuByRoleId(roleId).Select(m=>m.rid).ToArray();
 
             return Json(data,JsonRequestBehavior.AllowGet);
         }
 
         public JsonResult DeleteUserFromRole(string userId,int roleId) {
 
             try
             {
                 var result = _roleRepository.DeleteUserFromRole(userId,roleId);
                 if (result)
                 {
                     return Json(new { result = true, msg = "" }, JsonRequestBehavior.AllowGet);
                 }
                 else
                 {
                     return Json(new { result = false, msg = "操作失败！" }, JsonRequestBehavior.AllowGet);
                 }
             }
             catch (Exception ex)
             {
                 return Json(new { result = false, msg = ex.Message }, JsonRequestBehavior.AllowGet);
             }
         }
     }

LigerUI权限系统之角色管理的更多相关文章

LigerUI权限系统之用户管理
用户管理较之前的的组织结构和菜单管理稍显复杂.不管怎样还是先上图吧,再来讲解左边是组织结构,右边是用户,用户是跟组织机构挂钩的,通过点击左边的组织结构,来刷新右边,加载该组织机构下的用户. 用户管理 ...
LigerUI权限系统之菜单管理
菜单管理跟上篇的组织结构实现方式差不多,所以不存在多大的问题.还是老样,先上图,再看代码.菜单管理界面菜单管理添加: 菜单管理修改: 前端完整代码: @section headerScripts{ ...
分享Mvc3+NInject+EF+LigerUI权限系统
分享Mvc3+NInject+EF+LigerUI权限系统前段时间时不时看到有园友的分享权限系统,于是本人突发奇想,也想写一个玩玩,就利用晚上时间,陆陆续续花了一周多样子,写了如今这个权限系统, ...
分享Mvc3+NInject+EF+LigerUI权限系统Demo
前段时间时不时看到有园友的分享权限系统,于是本人突发奇想,也想写一个玩玩,就利用晚上时间,陆陆续续花了一周多样子,写了如今这个权限系统,这个权限系统具有组织结构.用户.角色.菜单,组织结构下挂用户, ...
MyCms 开源自媒体系统后台角色管理&管理员管理操作说明
角色管理功能说明一.添加角色基本信息填写角色名称.简要描述(一般以角色功能.职位等信息来命名) 二.角色授权点击右侧的"授权"按钮,进行对角色授权,选择需要授权的功能模块后 ...
LigerUI权限系统之组织结构
先上图,再看代码.组织结构界面组织结构添加: 组织结构修改: 组织结构删除: 我在做这个页面的时候treegrid 的远程数据加载让我很头痛,从LigerUI官网提供的Demo来看,它是根据json ...
rbac集成权限分配。之角色管理
权限分配功能拆分: a. 角色管理 b. 用户管理 c. 菜单和权限的管理 d. 批量的权限操作 e. 分配权限先实现角色管理: 无非也就是,增删改查: 定义路由, 编写视图. 1.查看角色页面: ...
Oracle用户、权限、角色管理学习（文字很系统）
Oracle用户.权限.角色管理 2009-03-16 13:20:50 标签:oracle 数据库休闲职场原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明 ...
Oracle用户、权限、角色管理(转)
http://blog.csdn.net/junmail/article/details/4381287 Oracle 权限设置一.权限分类:系统权限:系统规定用户使用数据库的权限.(系统权限是对用户 ...

随机推荐

[Elasticsearch] 分布式文件存储
本文翻译自Elasticsearch官方指南的distributed document store一章. 分布式文档存储在上一章中,我们一直在介绍索引数据和获取数据的方法.可是我们省略了非常多关于数 ...
ASP.NET MVC 插件化
ASP.NET MVC 插件化机制 2015-03-14 22:25 by 杨康新, 1328 阅读, 15 评论, 收藏, 编辑概述 nopCommerce的插件机制的核心是使用BuildMana ...
NET中异常处理的最佳实践
NET中异常处理的最佳实践本文翻译自CodeProject上的一篇文章,原文地址. 目录介绍做最坏的打算提前检查不要信任外部数据可信任的设备:摄像头.鼠标以及键盘 “写操作”同样可能失效 ...
Delphi三层网络架构代码实现
Delphi三层网络架构代码实现 1 .三层网络的概念三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为: 表现层(UI).业务逻辑层(BLL).数据访 ...
MySQL在Windows和Linux减少数据库
Linux减少数据库代码: 1,创建一个空数据库cddl mysql> create database cddl; Query OK, 1 row affected (0.00 sec) 2,还 ...
快速构建Windows 8风格应用15-ShareContract构建
原文:快速构建Windows 8风格应用15-ShareContract构建本篇博文主要介绍共享数据包.如何构建共享源.如何构建共享目标.DataTransferManager类. 共享数据包 Da ...
图解IntelliJ IDEA v13应用服务器的运行配置
初步了解IntelliJ IDEA v13应用服务器以后,接下来我们将继续设置应用服务器的运行配置. Artifacts是IDE在通过运行配置时部署的一个服务.Artifacts包括名称.类型.输出目 ...
leetcode第26题--Remove Duplicates from Sorted Array
problem: Given a sorted array, remove the duplicates in place such that each element appear only onc ...
javascript 动态创建tip图片提示
前言: 在做前端的项目中,经常看到移动一个小图标上显示这个图标对应的大图的提示,之前的做法是在小图标的位置后面添加一个div,然后移动到小图标然后显示这个图标的图片!但是这个方法做的时候发现,如果提示 ...
js操作cookie方法
cookie cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109和2965都已废弃,最 ...

LigerUI权限系统之角色管理

LigerUI权限系统之角色管理的更多相关文章

随机推荐

热门专题