list.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script class="include" system="" path="inc/" file="head">include()</script>
  5. <link rel="stylesheet" href="../script/lib/layui/admin/modules/plugin/formselects/formselects.css" media="all" />
  6. </head>
  7. <body>
  8. <style id="addstyle">
  9. </style>
  10. <style>
  11. .layui-table-cell .layui-select,.layui-table-cell .layui-input
  12. {
  13. height: 25px;
  14. }
  15. .layui-table-cell {
  16. height: auto;
  17. }
  18. .table th,.table td {
  19. min-width: 60px;
  20. }
  21. #table_2,#table_1 {
  22. overflow: auto;
  23. }
  24. .layui-btn-xs
  25. {
  26. margin-top:1px;
  27. }
  28. .dever-emoji img {
  29. width:16px;
  30. }
  31. .layui-tab-title {
  32. height: 100%;
  33. white-space: inherit;
  34. }
  35. .layui-form-item .layui-input-inline {
  36. display: block;
  37. float: none;
  38. left: -3px;
  39. margin: 0px 0px 0px 0px;
  40. }
  41. .chart {
  42. width: 100%;
  43. height:300px;
  44. }
  45. .table-header-fixed {
  46. top: 0;
  47. position: fixed;
  48. z-index: 999;
  49. }
  50. .goods_table {
  51. width: 100%;
  52. }
  53. .goods_table th
  54. {
  55. text-align: center;
  56. }
  57. .goods_table td
  58. {
  59. text-align: center;
  60. }
  61. </style>
  62. <div id="load_style" style="display:none;">
  63. </div>
  64. <span id="dever-name" style="display:none;"></span>
  65. <div class="topbar">
  66. <div class="banner dever-layout" style="display:none;">
  67. <a target="_blank"><img src="#"></a>
  68. <span>项目名称</span>
  69. </div>
  70. </div>
  71. <div id="content_1" style="display:none;"></div>
  72. <div id="content_2">
  73. <div class="layui-fluid">
  74. <div class="layui-card" id="stat_data_card">
  75. <div class="layui-card-header">数据概览</div>
  76. <div class="layui-card-body">
  77. <div class="layui-carousel layadmin-carousel layadmin-backlog">
  78. <div carousel-item>
  79. <ul class="layui-row layui-col-space10" id="stat_data">
  80. <li class="layui-col-xs3">
  81. <a class="layadmin-backlog-body">
  82. <h3>待审评论</h3>
  83. <p><cite>66</cite></p>
  84. </a>
  85. </li>
  86. </ul>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="layui-card">
  92. <input type="hidden" name="url1" id="url" value=""/>
  93. <form id="form1" name="form1" method="get" target="f1">
  94. <input type="hidden" name="l" id="l" value="msg"/>
  95. <input type="hidden" name="project" id="project" value="msg"/>
  96. <input type="hidden" name="table" id="tables" value="msg"/>
  97. <input type="hidden" name="menu" id="menu" value="msg"/>
  98. <input type="hidden" name="menu_id" id="menu_id" value="msg"/>
  99. <input type="hidden" name="search_option_state" id="search_option_state" value="msg"/>
  100. <input type="hidden" name="function" id="function" value="msg"/>
  101. <input type="hidden" name="method" id="method" value="search"/>
  102. <div id="search_param"></div>
  103. <iframe id="f1" name="f1" style="display:none;"></iframe>
  104. <div class="layui-card-header" style="display: none;"><span id="list-project">网站设置</span> > <span id="list-name"></span></div>
  105. <div class="layui-card-body" id="search_content">
  106. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  107. <div class="layui-form-item">
  108. <div id="search"></div>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="layui-card-body">
  113. <div style="padding-bottom: 10px;">
  114. <a class="layui-btn layuiadmin-btn-list" data-type="add" id="list-parent" style="display:none;">返回上一页</a>
  115. <a class="layui-btn layuiadmin-btn-list" data-type="add" id="list-add">新增</a>
  116. <span id="list-button"></span>
  117. </div>
  118. <div class="dever_desc" id="info"></div>
  119. <div id="table_1" style="display:none;"></div>
  120. <div id="table_2">
  121. <div id="chart" class="chart"></div>
  122. <table class="table layui-table layui-table-body" id="table">
  123. <thead id="list-thead">
  124. <tr>
  125. <th>Company</th>
  126. </tr>
  127. </thead>
  128. <tbody id="list-tbody">
  129. <tr>
  130. <th></th>
  131. </tr>
  132. </tbody>
  133. </table>
  134. <div id="mul"></div>
  135. <div id="page"></div>
  136. <div class="dever_desc" id="desc"></div>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. </form>
  142. <form id="form2" name="form2" method="get" style="display: none;"></form>
  143. <div id="struct" style="display:none;"></div>
  144. </div>
  145. </div>
  146. </div>
  147. <script class="include" system="" path="inc/" file="script">include()</script>
  148. <script id="list-thead-data">
  149. config.table = {};
  150. config.table.cols = [];
  151. </script>
  152. <script id="list-tbody-data">
  153. config.table.data = [];
  154. </script>
  155. <script>
  156. layui.config({
  157. base: '../script/lib/layui/admin/' //静态资源所在路径
  158. }).extend({
  159. formSelects: 'plugin/formselects/formselects',
  160. index: 'lib/index' //主入口模块
  161. }).use(['index', 'contlist', 'table', 'form', 'formSelects', 'console'], function(){
  162. var table = layui.table;
  163. var form = layui.form;
  164. var formSelects = layui.formSelects;
  165. if (config.table.cols.length > 0) {
  166. console.info(config.table.cols);
  167. table.render({
  168. elem: '#table'
  169. ,page: false
  170. ,limit:20
  171. ,cols: config.table.cols
  172. ,data: config.table.data
  173. ,done:function(res, curr, count) {
  174. let headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离
  175. $(window).scroll(function () {
  176. if ((headerTop - $(window).scrollTop()) < 0) { //超过了
  177. $('.layui-table-header').addClass('table-header-fixed'); //添加样式,固定住表头
  178. } else { //没超过
  179. $('.layui-table-header').removeClass('table-header-fixed'); //移除样式
  180. }
  181. });
  182. }
  183. });
  184. }
  185. init();
  186. if ($('.dever-manage').length) {
  187. $('.dever-manage').click(function()
  188. {
  189. showMsg('数据结构', $(this), '#struct');
  190. })
  191. }
  192. //滚动body,header跟随滚动
  193. $('.layui-table-body').on('scroll', function(e) {
  194. var leftPx = $(e.target).scrollLeft(); //获取表格body,滚动条距离左边的长度
  195. var left = 'translateX(-' + leftPx + 'px)';
  196. $('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动
  197. });
  198. });
  199. </script>
  200. </body>
  201. </html>