index.jsp 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  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. <jsp:include page="/resources/inc/head.jsp" flush="true"/>
  17. </head>
  18. <body>
  19. <div id="main">
  20. <div id="toolbar">
  21. <shiro:hasPermission name="cms:topic:create"><a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增专题</a></shiro:hasPermission>
  22. <shiro:hasPermission name="cms:topic:update"><a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i> 编辑专题</a></shiro:hasPermission>
  23. <shiro:hasPermission name="cms:topic:delete"><a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></i> 删除专题</a></shiro:hasPermission>
  24. </div>
  25. <table id="table"></table>
  26. </div>
  27. <jsp:include page="/resources/inc/footer.jsp" flush="true"/>
  28. <script>
  29. var $table = $('#table');
  30. $(function() {
  31. // bootstrap table初始化
  32. $table.bootstrapTable({
  33. url: '${basePath}/manage/topic/list',
  34. height: getHeight(),
  35. striped: true,
  36. search: true,
  37. showRefresh: true,
  38. showColumns: true,
  39. minimumCountColumns: 2,
  40. clickToSelect: true,
  41. detailView: true,
  42. detailFormatter: 'detailFormatter',
  43. pagination: true,
  44. paginationLoop: false,
  45. sidePagination: 'server',
  46. silentSort: false,
  47. smartDisplay: false,
  48. escape: true,
  49. searchOnEnterKey: true,
  50. idField: 'pageId',
  51. maintainSelected: true,
  52. toolbar: '#toolbar',
  53. columns: [
  54. {field: 'ck', checkbox: true},
  55. {field: 'topicId', title: '编号', sortable: true, align: 'center'},
  56. {field: 'title', title: '标题'},
  57. {field: 'description', title: '描述'},
  58. {field: 'url', title: '链接'},
  59. {field: 'ctime', title: '创建时间', formatter: 'timeFormatter'},
  60. {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
  61. ]
  62. });
  63. });
  64. // 格式化操作按钮
  65. function actionFormatter(value, row, index) {
  66. return [
  67. '<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
  68. '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
  69. ].join('');
  70. }
  71. // 格式化时间
  72. function timeFormatter(value , row, index) {
  73. return new Date(value).toLocaleString();
  74. }
  75. // 新增
  76. var createDialog;
  77. function createAction() {
  78. createDialog = $.dialog({
  79. animationSpeed: 300,
  80. title: '新增专题',
  81. content: 'url:${basePath}/manage/topic/create',
  82. onContentReady: function () {
  83. initMaterialInput();
  84. }
  85. });
  86. }
  87. // 编辑
  88. var updateDialog;
  89. function updateAction() {
  90. var rows = $table.bootstrapTable('getSelections');
  91. if (rows.length != 1) {
  92. $.confirm({
  93. title: false,
  94. content: '请选择一条记录!',
  95. autoClose: 'cancel|3000',
  96. backgroundDismiss: true,
  97. buttons: {
  98. cancel: {
  99. text: '取消',
  100. btnClass: 'waves-effect waves-button'
  101. }
  102. }
  103. });
  104. } else {
  105. updateDialog = $.dialog({
  106. animationSpeed: 300,
  107. title: '编辑专题',
  108. content: 'url:${basePath}/manage/topic/update/' + rows[0].topicId,
  109. onContentReady: function () {
  110. initMaterialInput();
  111. }
  112. });
  113. }
  114. }
  115. // 删除
  116. var deleteDialog;
  117. function deleteAction() {
  118. var rows = $table.bootstrapTable('getSelections');
  119. if (rows.length == 0) {
  120. $.confirm({
  121. title: false,
  122. content: '请至少选择一条记录!',
  123. autoClose: 'cancel|3000',
  124. backgroundDismiss: true,
  125. buttons: {
  126. cancel: {
  127. text: '取消',
  128. btnClass: 'waves-effect waves-button'
  129. }
  130. }
  131. });
  132. } else {
  133. deleteDialog = $.confirm({
  134. type: 'red',
  135. animationSpeed: 300,
  136. title: false,
  137. content: '确认删除该专题吗?',
  138. buttons: {
  139. confirm: {
  140. text: '确认',
  141. btnClass: 'waves-effect waves-button',
  142. action: function () {
  143. var ids = new Array();
  144. for (var i in rows) {
  145. ids.push(rows[i].topicId);
  146. }
  147. $.ajax({
  148. type: 'get',
  149. url: '${basePath}/manage/topic/delete/' + ids.join("-"),
  150. success: function(result) {
  151. if (result.code != 1) {
  152. if (result.data instanceof Array) {
  153. $.each(result.data, function(index, value) {
  154. $.confirm({
  155. theme: 'dark',
  156. animation: 'rotateX',
  157. closeAnimation: 'rotateX',
  158. title: false,
  159. content: value.errorMsg,
  160. buttons: {
  161. confirm: {
  162. text: '确认',
  163. btnClass: 'waves-effect waves-button waves-light'
  164. }
  165. }
  166. });
  167. });
  168. } else {
  169. $.confirm({
  170. theme: 'dark',
  171. animation: 'rotateX',
  172. closeAnimation: 'rotateX',
  173. title: false,
  174. content: result.data.errorMsg,
  175. buttons: {
  176. confirm: {
  177. text: '确认',
  178. btnClass: 'waves-effect waves-button waves-light'
  179. }
  180. }
  181. });
  182. }
  183. } else {
  184. deleteDialog.close();
  185. $table.bootstrapTable('refresh');
  186. }
  187. },
  188. error: function(XMLHttpRequest, textStatus, errorThrown) {
  189. $.confirm({
  190. theme: 'dark',
  191. animation: 'rotateX',
  192. closeAnimation: 'rotateX',
  193. title: false,
  194. content: textStatus,
  195. buttons: {
  196. confirm: {
  197. text: '确认',
  198. btnClass: 'waves-effect waves-button waves-light'
  199. }
  200. }
  201. });
  202. }
  203. });
  204. }
  205. },
  206. cancel: {
  207. text: '取消',
  208. btnClass: 'waves-effect waves-button'
  209. }
  210. }
  211. });
  212. }
  213. }
  214. </script>
  215. </body>
  216. </html>