角色管理比前面几个页面都稍显复杂点。好吧，还是先看图。
左边是角色列表，右边是页面列表，它们也是多对多的关系，即一个角色可以访问多个页面，同时一个页面也可以被多个角色访问。
点击左边的角色，刷新右边页面列表，显示已为其分配的页面，若想取消某个页面，只要把前面的勾去掉，然后保存就可以了。
删除该角色下的用户这个有点麻烦，从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>