list.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  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. .table {
  12. /*box-shadow: 10px 11px 33px -14px;*/
  13. }
  14. .layui-table-cell .layui-select,.layui-table-cell .layui-input
  15. {
  16. height: 25px;
  17. }
  18. .layui-table-cell {
  19. height: auto;
  20. }
  21. .layui-card-header {
  22. padding: 0px 5px;
  23. }
  24. .table th,.table td {
  25. min-width: 60px;
  26. }
  27. #table_2,#table_1 {
  28. /*overflow: auto;*/
  29. }
  30. .layui-btn-xs
  31. {
  32. margin-top:1px;
  33. }
  34. .dever-emoji img {
  35. width:16px;
  36. }
  37. .layui-tab-title {
  38. height: 100%;
  39. white-space: inherit;
  40. }
  41. .layui-form-item .layui-input-inline {
  42. display: block;
  43. float: none;
  44. left: -3px;
  45. margin: 0px 0px 0px 0px;
  46. }
  47. .chart {
  48. width: 100%;
  49. height:300px;
  50. }
  51. .table-header-fixed {
  52. top: -1px;
  53. position: sticky;
  54. z-index: 999;
  55. background-color: #f2f2f2;
  56. }
  57. .table-tr-fixed {
  58. background-color: #f2f2f2;
  59. }
  60. .goods_table {
  61. width: 100%;
  62. }
  63. .goods_table th
  64. {
  65. text-align: center;
  66. }
  67. .goods_table td
  68. {
  69. text-align: center;
  70. }
  71. .layui-table-tool-temp{
  72. display: none;
  73. }
  74. .layadmin-carousel {
  75. height: 90px!important;
  76. }
  77. </style>
  78. <div id="load_style" style="display:none;">
  79. </div>
  80. <span id="dever-name" style="display:none;"></span>
  81. <div class="topbar">
  82. <div class="banner dever-layout" style="display:none;">
  83. <a target="_blank"></a>
  84. <span>项目名称</span>
  85. </div>
  86. </div>
  87. <div id="content_1" style="display:none;"></div>
  88. <div id="content_2">
  89. <div class="layui-fluid">
  90. <div class="layui-card" id="stat_data_card">
  91. <div class="layui-card-header">数据概览</div>
  92. <div class="layui-card-body">
  93. <div class="layui-carousel layadmin-carousel layadmin-backlog">
  94. <div carousel-item>
  95. <ul class="layui-row layui-col-space10" id="stat_data">
  96. <li class="layui-col-xs3">
  97. <a class="layadmin-backlog-body">
  98. <h3>待审评论</h3>
  99. <p><cite>66</cite></p>
  100. </a>
  101. </li>
  102. </ul>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="layui-card">
  108. <input type="hidden" name="url1" id="url" value=""/>
  109. <form id="form1" name="form1" method="get" target="f1">
  110. <input type="hidden" name="l" id="l" value="msg"/>
  111. <input type="hidden" name="project" id="project" value="msg"/>
  112. <input type="hidden" name="table" id="tables" value="msg"/>
  113. <input type="hidden" name="alias" id="alias" />
  114. <input type="hidden" name="menu" id="menu" value="msg"/>
  115. <input type="hidden" name="menu_id" id="menu_id" value="msg"/>
  116. <input type="hidden" name="fast" id="fast" />
  117. <input type="hidden" name="dever_submit" id="dever_submit" />
  118. <input type="hidden" name="parent" id="parent" />
  119. <input type="hidden" name="search_option_state" id="search_option_state" value="msg"/>
  120. <input type="hidden" name="function" id="function" value="msg"/>
  121. <input type="hidden" name="method" id="method" value="search"/>
  122. <div id="search_param"></div>
  123. <iframe id="f1" name="f1" style="display:none;"></iframe>
  124. <div class="layui-card-header" style="display: none;"><span id="list-project">网站设置</span> > <span id="list-name"></span></div>
  125. <div class="layui-card-body" id="search_content">
  126. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  127. <div class="layui-form-item">
  128. <div id="search"></div>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="layui-card-body">
  133. <div id="list-button" style="padding-bottom: 10px;">
  134. <a class="layui-btn layuiadmin-btn-list" data-type="add" id="list-parent" style="display:none;margin-right: 10px;">返回上一页</a>
  135. <a class="layui-btn layuiadmin-btn-list" data-type="add" id="list-add" style="margin-left: 0px;">新增</a>
  136. </div>
  137. <div class="dever_desc" id="info"></div>
  138. <div id="table_1" style="display:none;"></div>
  139. <div id="table_2">
  140. <div id="chart" class="chart"></div>
  141. <table class="table layui-table layui-table-body" id="table" lay-evens>
  142. <thead id="list-thead">
  143. <tr>
  144. <th>Company</th>
  145. </tr>
  146. </thead>
  147. <tbody id="list-tbody">
  148. <tr>
  149. <th></th>
  150. </tr>
  151. </tbody>
  152. </table>
  153. <div id="mul"></div>
  154. <div id="page" style="display:none;width: max-content"></div>
  155. <div class="dever_desc" id="desc"></div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </form>
  161. <form id="form2" name="form2" method="get" style="display: none;"></form>
  162. <div id="struct" style="display:none;"></div>
  163. </div>
  164. </div>
  165. </div>
  166. <script class="include" system="" path="inc/" file="script">include()</script>
  167. <script id="list-thead-data">
  168. config.table = {};
  169. config.table.limit = 20;
  170. config.table.cols = [];
  171. </script>
  172. <script id="list-tbody-data">
  173. config.table.data = [];
  174. </script>
  175. <script>
  176. var form;
  177. layui.config({
  178. base: '../script/lib/layui/admin/' //静态资源所在路径
  179. ,version:false
  180. }).extend({
  181. //formSelects: 'plugin/formselects/formselects',
  182. index: 'lib/index' //主入口模块
  183. }).use(['index', 'contlist', 'table', 'form', 'console'], function(){
  184. var table = layui.table;
  185. form = layui.form;
  186. //var formSelects = layui.formSelects;
  187. if (window.screen.width < 500) {
  188. $('#table_1').css({'overflow' : 'auto'});
  189. $('#table_2').css({'overflow' : 'auto'});
  190. }
  191. if ($('#content_2').css('display') != 'none') {
  192. var bw = document.body.scrollWidth;
  193. var sw = $('#content_2').width();
  194. if (sw > 0 && bw > sw) {
  195. $('body').css({'width' : 'fit-content'});
  196. }
  197. }
  198. if (config.table.cols.length > 0) {
  199. table.render({
  200. elem: '#table'
  201. ,page: false
  202. ,even : true
  203. ,limit:config.table.limit
  204. //,toolbar:'default'
  205. //,defaultToolbar:["filter","exports","print"]
  206. ,cols: config.table.cols
  207. ,data: config.table.data
  208. ,done:function(res, curr, count) {
  209. $('#page').show();
  210. let headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离
  211. $(window).scroll(function () {
  212. if (count > 3 && (headerTop - $(window).scrollTop()) < 0) { //超过了
  213. $('.layui-table-header').addClass('table-header-fixed'); //添加样式,固定住表头
  214. } else { //没超过
  215. $('.layui-table-header').removeClass('table-header-fixed'); //移除样式
  216. }
  217. });
  218. }
  219. });
  220. } else {
  221. $('#page').show();
  222. var count = $('#list-tbody tr').length;
  223. let headerTop = $('#list-thead').offset().top; //获取表格头到文档顶部的距离
  224. $(window).scroll(function () {
  225. if (count > 3 && (headerTop - $(window).scrollTop()) < 100) { //超过了
  226. $('#list-thead').addClass('table-header-fixed'); //添加样式,固定住表头
  227. /*
  228. $('#list-thead th').each(function (k, v) {
  229. var width = $('#list-tbody td').eq(k).width() + 0.9;
  230. //$(v).width(width + 1);
  231. $(v).css({'min-width': width});
  232. });*/
  233. } else { //没超过
  234. $('#list-thead').removeClass('table-header-fixed'); //移除样式
  235. }
  236. });
  237. }
  238. init();
  239. $('body').on("mouseenter",".layui-table-body tr",function () {
  240. $(this).addClass('table-tr-fixed');
  241. })
  242. $('body').on("mouseleave",".layui-table-body tr",function () {
  243. $(this).removeClass('table-tr-fixed');
  244. })
  245. if ($('.dever-manage').length) {
  246. $('.dever-manage').dblclick(function()
  247. {
  248. showMsg('数据结构', $(this), '#struct');
  249. })
  250. }
  251. //滚动body,header跟随滚动
  252. $('.layui-table-body').on('scroll', function(e) {
  253. var leftPx = $(e.target).scrollLeft(); //获取表格body,滚动条距离左边的长度
  254. var left = 'translateX(-' + leftPx + 'px)';
  255. $('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动
  256. });
  257. });
  258. </script>
  259. </body>
  260. </html>