button.jsp 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <%@ page contentType="text/html; charset=utf-8"%>
  2. <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
  4. <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
  5. <%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
  6. <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
  7. <%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
  8. <c:set var="basePath" value="${pageContext.request.contextPath}"/>
  9. <!DOCTYPE HTML>
  10. <html lang="zh-cn">
  11. <head>
  12. <meta charset="utf-8">
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14. <meta name="viewport" content="width=device-width, initial-scale=1">
  15. <title>权限管理</title>
  16. <link href="${basePath}/resources/zheng-admin/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
  17. <link href="${basePath}/resources/zheng-admin/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
  18. <link href="${basePath}/resources/zheng-admin/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
  19. <link href="${basePath}/resources/zheng-admin/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
  20. <link href="${basePath}/resources/zheng-admin/css/common.css" rel="stylesheet"/>
  21. </head>
  22. <body>
  23. <div id="main">
  24. <div id="toolbar">
  25. <shiro:hasPermission name="upms:permission:create"><a class="waves-effect waves-button" href="javascript:;"><i class="zmdi zmdi-plus"></i> 新增权限</a></shiro:hasPermission>
  26. <shiro:hasPermission name="upms:permission:update"><a class="waves-effect waves-button" href="javascript:;"><i class="zmdi zmdi-edit"></i> 编辑权限</a></shiro:hasPermission>
  27. <shiro:hasPermission name="upms:permission:delete"><a class="waves-effect waves-button" href="javascript:;"><i class="zmdi zmdi-close"></i> 删除权限</a></shiro:hasPermission>
  28. </div>
  29. <table id="table"></table>
  30. </div>
  31. <script src="${basePath}/resources/zheng-admin/plugins/jquery.1.12.4.min.js"></script>
  32. <script src="${basePath}/resources/zheng-admin/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
  33. <script src="${basePath}/resources/zheng-admin/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
  34. <script src="${basePath}/resources/zheng-admin/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
  35. <script src="${basePath}/resources/zheng-admin/plugins/waves-0.7.5/waves.min.js"></script>
  36. <script src="${basePath}/resources/zheng-admin/js/common.js"></script>
  37. <style>
  38. body{font-size: 12px;}
  39. .table i{font-size: 12px; color: #000;}
  40. .bootstrap-table .table>thead>tr>th{border-bottom: none;}
  41. </style>
  42. <script>
  43. $(function() {
  44. // bootstrap table初始化
  45. $('#table').bootstrapTable({
  46. url: '${basePath}/manage/permission/list?type=2',
  47. height: getHeight(),
  48. striped: true,
  49. search: true,
  50. showRefresh: true,
  51. showColumns: true,
  52. minimumCountColumns: 2,
  53. clickToSelect: true,
  54. detailView: true,
  55. detailFormatter: 'detailFormatter',
  56. pagination: true,
  57. toolbar: '#toolbar',
  58. columns: [
  59. {field: 'state', checkbox: true},
  60. {field: 'permissionId', title: '编号', sortable: true, align: 'center'},
  61. {field: 'systemId', title: '所属系统'},
  62. {field: 'pid', title: '所属上级'},
  63. {field: 'name', title: '权限名称'},
  64. {field: 'type', title: '类型', formatter: 'typeFormatter'},
  65. {field: 'permissionValue', title: '权限值'},
  66. {field: 'uri', title: '路径'},
  67. {field: 'icon', title: '图标', align: 'center', formatter: 'iconFormatter'},
  68. {field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter'},
  69. {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents'}
  70. ]
  71. }).on('all.bs.table', function (e, name, args) {
  72. $('[data-toggle="tooltip"]').tooltip();
  73. $('[data-toggle="popover"]').popover();
  74. });
  75. $(window).resize(function () {
  76. $('#table').bootstrapTable('resetView', {
  77. height: getHeight()
  78. });
  79. });
  80. });
  81. // 格式化操作按钮
  82. function actionFormatter(value, row, index) {
  83. return [
  84. '<a class="update" href="javascript:void(0)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
  85. '<a class="delete" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
  86. ].join('');
  87. }
  88. // 格式化图标
  89. function iconFormatter(value, row, index) {
  90. return '<i class="' + value + '"></i>';
  91. }
  92. // 格式化类型
  93. function typeFormatter(value, row, index) {
  94. if (value == 1) {
  95. return '菜单';
  96. }
  97. if (value == 2) {
  98. return '按钮';
  99. }
  100. return '-';
  101. }
  102. // 格式化状态
  103. function statusFormatter(value, row, index) {
  104. if (value == 1) {
  105. return '<span class="label label-success">正常</span>';
  106. } else {
  107. return '<span class="label label-danger">锁定</span>';
  108. }
  109. }
  110. // 操作按钮事件
  111. window.actionEvents = {
  112. 'click .update': function (e, value, row, index) {
  113. alert('You click update icon, row: ' + JSON.stringify(row));
  114. console.log(value, row, index);
  115. },
  116. 'click .delete': function (e, value, row, index) {
  117. alert('You click delete icon, row: ' + JSON.stringify(row));
  118. console.log(value, row, index);
  119. }
  120. };
  121. // 展开内容
  122. function detailFormatter(index, row) {
  123. var html = [];
  124. $.each(row, function (key, value) {
  125. html.push('<p><b>' + key + ':</b> ' + value + '</p>');
  126. });
  127. return html.join('');
  128. }
  129. // 动态高度
  130. function getHeight() {
  131. return $(window).height() - 20;
  132. }
  133. </script>
  134. </body>
  135. </html>