multi.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  3. <head>
  4. <th:block th:include="include :: header('初始多表格')" />
  5. </head>
  6. <body class="gray-bg">
  7. <div class="container-div">
  8. <div class="row">
  9. <div class="col-sm-12 search-collapse">
  10. <form id="form1">
  11. <div class="select-list">
  12. <ul>
  13. <li>
  14. 用户名称:<input type="text" name="userName"/>
  15. </li>
  16. <li>
  17. <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('form1', 'bootstrap-table1')"><i class="fa fa-search"></i>&nbsp;搜索</a>
  18. <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('form1', 'bootstrap-table1')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
  19. </li>
  20. </ul>
  21. </div>
  22. </form>
  23. </div>
  24. <div class="btn-group-sm" id="toolbar1" role="group">
  25. <a class="btn btn-success" onclick="options1()">
  26. <i class="fa fa-search"></i> options
  27. </a>
  28. <a class="btn btn-success" onclick="$.operate.add()">
  29. <i class="fa fa-plus"></i> 新增
  30. </a>
  31. <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
  32. <i class="fa fa-edit"></i> 修改
  33. </a>
  34. <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
  35. <i class="fa fa-remove"></i> 删除
  36. </a>
  37. </div>
  38. <div class="col-xs-12 select-table table-striped">
  39. <table id="bootstrap-table1"></table>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="container-div">
  44. <div class="row">
  45. <div class="col-sm-12 search-collapse">
  46. <form id="form2">
  47. <div class="select-list">
  48. <ul>
  49. <li>
  50. 用户名称:<input type="text" name="userName"/>
  51. </li>
  52. <li>
  53. <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('form2', 'bootstrap-table2')"><i class="fa fa-search"></i>&nbsp;搜索</a>
  54. <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('form2', 'bootstrap-table2')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
  55. </li>
  56. </ul>
  57. </div>
  58. </form>
  59. </div>
  60. <div class="btn-group-sm" id="toolbar2" role="group">
  61. <a class="btn btn-success" onclick="options2()">
  62. <i class="fa fa-search"></i> options
  63. </a>
  64. <a class="btn btn-success" onclick="$.operate.add()">
  65. <i class="fa fa-plus"></i> 新增
  66. </a>
  67. <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
  68. <i class="fa fa-edit"></i> 修改
  69. </a>
  70. <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
  71. <i class="fa fa-remove"></i> 删除
  72. </a>
  73. </div>
  74. <div class="col-xs-12 select-table table-striped">
  75. <table id="bootstrap-table2"></table>
  76. </div>
  77. </div>
  78. </div>
  79. <div th:include="include :: footer"></div>
  80. <script th:inline="javascript">
  81. var prefix = ctx + "demo/operate";
  82. var datas = [[${@dict.getType('sys_normal_disable')}]];
  83. $(function() {
  84. var options = {
  85. id: "bootstrap-table1",
  86. formId: "form1",
  87. toolbar: "toolbar1",
  88. url: prefix + "/list",
  89. createUrl: prefix + "/add",
  90. removeUrl: prefix + "/remove",
  91. updateUrl: prefix + "/edit/{id}",
  92. modalName: "用户",
  93. columns: [{
  94. checkbox: true
  95. },
  96. {
  97. field : 'userId',
  98. title : '用户ID'
  99. },
  100. {
  101. field : 'userCode',
  102. title : '用户编号'
  103. },
  104. {
  105. field : 'userName',
  106. title : '用户姓名'
  107. },
  108. {
  109. field : 'userPhone',
  110. title : '用户手机'
  111. },
  112. {
  113. field : 'userEmail',
  114. title : '用户邮箱'
  115. },
  116. {
  117. field : 'userBalance',
  118. title : '用户余额'
  119. },
  120. {
  121. field: 'status',
  122. title: '用户状态',
  123. align: 'center',
  124. formatter: function(value, row, index) {
  125. return $.table.selectDictLabel(datas, value);
  126. }
  127. },
  128. {
  129. title: '操作',
  130. align: 'center',
  131. formatter: function(value, row, index) {
  132. var actions = [];
  133. actions.push('<a class="btn btn-success btn-xs" href="###" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
  134. actions.push('<a class="btn btn-danger btn-xs" href="###" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
  135. return actions.join('');
  136. }
  137. }]
  138. };
  139. $.table.init(options);
  140. });
  141. $(function() {
  142. var options = {
  143. id: "bootstrap-table2",
  144. formId: "form2",
  145. toolbar: "toolbar2",
  146. url: prefix + "/list",
  147. createUrl: prefix + "/add",
  148. removeUrl: prefix + "/remove",
  149. updateUrl: prefix + "/edit/{id}",
  150. modalName: "用户",
  151. columns: [{
  152. checkbox: true
  153. },
  154. {
  155. field : 'userId',
  156. title : '用户ID'
  157. },
  158. {
  159. field : 'userCode',
  160. title : '用户编号'
  161. },
  162. {
  163. field : 'userName',
  164. title : '用户姓名'
  165. },
  166. {
  167. field : 'userPhone',
  168. title : '用户手机'
  169. },
  170. {
  171. field : 'userEmail',
  172. title : '用户邮箱'
  173. },
  174. {
  175. field : 'userBalance',
  176. title : '用户余额'
  177. },
  178. {
  179. field: 'status',
  180. title: '用户状态',
  181. align: 'center',
  182. formatter: function(value, row, index) {
  183. return $.table.selectDictLabel(datas, value);
  184. }
  185. },
  186. {
  187. title: '操作',
  188. align: 'center',
  189. formatter: function(value, row, index) {
  190. var actions = [];
  191. actions.push('<a class="btn btn-success btn-xs" href="###" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
  192. actions.push('<a class="btn btn-danger btn-xs" href="###" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
  193. return actions.join('');
  194. }
  195. }]
  196. };
  197. $.table.init(options);
  198. });
  199. function options1() {
  200. var temp = "";
  201. var obj = table.config['bootstrap-table1'];
  202. for (var i in obj) {
  203. temp += i + ":" + obj[i] + "<br/>";
  204. }
  205. $.modal.alert(temp);
  206. }
  207. function options2() {
  208. var temp = "";
  209. var obj = table.config['bootstrap-table2'];
  210. for (var i in obj) {
  211. temp += i + ":" + obj[i] + "<br/>";
  212. }
  213. $.modal.alert(temp);
  214. }
  215. </script>
  216. </body>
  217. </html>