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);
             }
         }
     }