multi.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  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 select-table table-striped">
  10. <table id="bootstrap-table-1" data-mobile-responsive="true"></table>
  11. </div>
  12. </div>
  13. <div class="row">
  14. <div class="col-sm-12 select-table table-striped">
  15. <table id="bootstrap-table-2" data-mobile-responsive="true"></table>
  16. </div>
  17. </div>
  18. </div>
  19. <div th:include="include :: footer"></div>
  20. <script th:inline="javascript">
  21. var prefix = ctx + "demo/table";
  22. var datas = [[${@dict.getType('sys_normal_disable')}]];
  23. $(function() {
  24. var options = {
  25. id: "bootstrap-table-1",
  26. url: prefix + "/list",
  27. createUrl: prefix + "/add",
  28. updateUrl: prefix + "/edit/{id}",
  29. removeUrl: prefix + "/remove",
  30. exportUrl: prefix + "/export",
  31. showSearch: false,
  32. showRefresh: false,
  33. showToggle: false,
  34. showColumns: false,
  35. columns: [{
  36. checkbox: true
  37. },
  38. {
  39. field : 'userId',
  40. title : '用户ID'
  41. },
  42. {
  43. field : 'userCode',
  44. title : '用户编号'
  45. },
  46. {
  47. field : 'userName',
  48. title : '用户姓名'
  49. },
  50. {
  51. field : 'userPhone',
  52. title : '用户手机'
  53. },
  54. {
  55. field : 'userEmail',
  56. title : '用户邮箱'
  57. },
  58. {
  59. field : 'userBalance',
  60. title : '用户余额'
  61. },
  62. {
  63. field: 'status',
  64. title: '用户状态',
  65. align: 'center',
  66. formatter: function(value, row, index) {
  67. return $.table.selectDictLabel(datas, value);
  68. }
  69. },
  70. {
  71. title: '操作',
  72. align: 'center',
  73. formatter: function(value, row, index) {
  74. var actions = [];
  75. actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
  76. actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
  77. return actions.join('');
  78. }
  79. }]
  80. };
  81. $.table.init(options);
  82. });
  83. function queryParams(params) {
  84. var search = $.table.queryParams(params);
  85. search.userName = '测试1';
  86. return search;
  87. }
  88. $(function() {
  89. var options = {
  90. id: "bootstrap-table-2",
  91. url: prefix + "/list",
  92. showSearch: false,
  93. showRefresh: false,
  94. showToggle: false,
  95. showColumns: false,
  96. queryParams: queryParams,
  97. columns: [{
  98. checkbox: true
  99. },
  100. {
  101. field : 'userId',
  102. title : '用户ID'
  103. },
  104. {
  105. field : 'userCode',
  106. title : '用户编号'
  107. },
  108. {
  109. field : 'userName',
  110. title : '用户姓名'
  111. },
  112. {
  113. field : 'userPhone',
  114. title : '用户手机'
  115. },
  116. {
  117. field : 'userEmail',
  118. title : '用户邮箱'
  119. },
  120. {
  121. field : 'userBalance',
  122. title : '用户余额'
  123. },
  124. {
  125. field: 'status',
  126. title: '用户状态',
  127. align: 'center',
  128. formatter: function(value, row, index) {
  129. return $.table.selectDictLabel(datas, value);
  130. }
  131. },
  132. {
  133. title: '操作',
  134. align: 'center',
  135. formatter: function(value, row, index) {
  136. var actions = [];
  137. actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
  138. actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
  139. return actions.join('');
  140. }
  141. }]
  142. };
  143. $.table.init(options);
  144. });
  145. </script>
  146. </body>
  147. </html>