fixedColumns.html 3.3 KB

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