table.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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="btn-group-sm" id="toolbar" role="group">
  9. <a class="btn btn-success" onclick="$.operate.add()">
  10. <i class="fa fa-plus"></i> 新增
  11. </a>
  12. <a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()">
  13. <i class="fa fa-edit"></i> 修改
  14. </a>
  15. <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()">
  16. <i class="fa fa-remove"></i> 删除
  17. </a>
  18. <a class="btn btn-info" onclick="$.table.importExcel()">
  19. <i class="fa fa-upload"></i> 导入
  20. </a>
  21. <a class="btn btn-warning" onclick="$.table.exportExcel()">
  22. <i class="fa fa-download"></i> 导出
  23. </a>
  24. <a class="btn btn-info btn-detail disabled" onclick="$.operate.detail()">
  25. <i class="fa fa-search"></i> 详细
  26. </a>
  27. <a class="btn btn-danger" onclick="$.operate.clean()">
  28. <i class="fa fa-trash"></i> 清空
  29. </a>
  30. </div>
  31. <div class="row">
  32. <div class="col-sm-12 select-table table-striped">
  33. <table id="bootstrap-table" data-mobile-responsive="true"></table>
  34. </div>
  35. </div>
  36. </div>
  37. <div th:include="include :: footer"></div>
  38. <script th:inline="javascript">
  39. var prefix = ctx + "demo/operate";
  40. var datas = [[${@dict.getType('sys_normal_disable')}]];
  41. $(function() {
  42. var options = {
  43. url: prefix + "/list",
  44. createUrl: prefix + "/add",
  45. updateUrl: prefix + "/edit/{id}",
  46. removeUrl: prefix + "/remove",
  47. exportUrl: prefix + "/export",
  48. importUrl: prefix + "/importData",
  49. importTemplateUrl: prefix + "/importTemplate",
  50. detailUrl: prefix + "/detail/{id}",
  51. cleanUrl: prefix + "/clean",
  52. showSearch: false,
  53. showRefresh: false,
  54. showToggle: false,
  55. showColumns: false,
  56. search: true,
  57. modalName: "用户",
  58. columns: [{
  59. checkbox: true
  60. },
  61. {
  62. field : 'userId',
  63. title : '用户ID'
  64. },
  65. {
  66. field : 'userCode',
  67. title : '用户编号'
  68. },
  69. {
  70. field : 'userName',
  71. title : '用户姓名'
  72. },
  73. {
  74. field : 'userPhone',
  75. title : '用户手机'
  76. },
  77. {
  78. field : 'userEmail',
  79. title : '用户邮箱'
  80. },
  81. {
  82. field : 'userBalance',
  83. title : '用户余额'
  84. },
  85. {
  86. field: 'status',
  87. title: '用户状态',
  88. align: 'center',
  89. formatter: function(value, row, index) {
  90. return $.table.selectDictLabel(datas, value);
  91. }
  92. },
  93. {
  94. title: '操作',
  95. align: 'center',
  96. formatter: function(value, row, index) {
  97. var actions = [];
  98. actions.push('<a class="btn btn-success btn-xs" href="#" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
  99. actions.push('<a class="btn btn-info btn-xs" href="#" onclick="$.operate.detail(\'' + row.userId + '\')"><i class="fa fa-search"></i>详细</a> ');
  100. actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
  101. return actions.join('');
  102. }
  103. }]
  104. };
  105. $.table.init(options);
  106. });
  107. </script>
  108. </body>
  109. <!-- 导入区域 -->
  110. <form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
  111. <div class="col-xs-offset-1">
  112. <input type="file" id="file" name="file"/>
  113. <div class="mt10 pt5">
  114. <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在,更新这条数据。"> 是否更新已经存在的用户数据
  115. &nbsp; <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
  116. </div>
  117. <font color="red" class="pull-left mt10">
  118. 提示:仅允许导入“xls”或“xlsx”格式文件!
  119. </font>
  120. </div>
  121. </form>
  122. </html>