添加管理页面

需要新增2个页面

第一个是WebContent/page/simple_role.jsp, 这是authority.jsp页面的外框

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>无框架的权限管理界面</title>
  8.     <script src="${base}/rs/js/jquery.js"></script>
  9. </head>
  10. <body>
  11. <jsp:include page="authority.jsp"></jsp:include>
  12. <script type="text/javascript">
  13.     var home_base = '${base}';
  14.     $(function() {
  15.         myInit();
  16.     });
  17. </script>
  18. </body>
  19. </html>

第二个当然是authority.jsp了, 有几百行,只能节选了

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <div class="row">
  3.     <!-- 下面的ul是3个Table -->
  4.     <ul class="md-tab-group">
  5.         <li>
  6.             <div class="ripple-button" id="_user_role" onclick="showTab('user_role')">用户权限一览</div>
  7.         </li>
  8.         <li>
  9.             <div class="ripple-button" id="_roles" onclick="showTab('roles')">角色一览</div>
  10.         </li>
  11.         <li>
  12.             <div class="ripple-button" id="_permissions" onclick="showTab('permissions')">权限一览</div>
  13.         </li>
  14.         <div class="tab-bottom"></div>
  15.     </ul>
  17. ....................
  18. ....................
  19. ....................
  21. <script type="text/javascript">
  22.     _r = {};
  23.     /*页面片段的初始化方法*/
  24.     function myInit(args) {
  25.         // 载入用户列表
  26.         loadUsers();
  27.         // 载入角色列表
  28.         loadRoles();
  29.         // 载入权限列表
  30.         loadPermissions();
  31.         // 默认显示用户列表的Tab
  32.         $("#_user_role").click();
  33.     };
  35. ....................
  36. ....................
  37. ....................
  39.     /*新增一个权限*/
  40.     function permission_add() {
  41.         var permission_name = prompt("请输入新角色的名词,仅限英文字母/冒号/米号,长度3到30个字符");
  42.         var re = /[a-zA-Z\:\*]{3,10}/;  
  43.         if (permission_name && re.exec(permission_name)) {
  44.             $.ajax({
  45.                 url : home_base + "/admin/authority/permission/add",
  46.                 type : "POST",
  47.                 data : JSON.stringify({name:permission_name}),
  48.                 success : function () {
  49.                     loadPermissions();
  50.                 }
  51.             });
  52.         }
  53.     };
  55. </script>

页面并没有多少美化,纯html, 点击XXX一览就切换不同的div