params.html 4.3 KB

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