Commit ec4fd9ee220aac62497c427ab5895cf92f16459b
1 parent
1a40e9ec
Exists in
dev
feat: 需求表格自动滚动
Showing
2 changed files
with
112 additions
and
78 deletions
Show diff stats
platform/src/main/webapp/template/web/home/product.html
| ... | ... | @@ -8,7 +8,7 @@ if(isEmpty(page)){ |
| 8 | 8 | page = 1; |
| 9 | 9 | } |
| 10 | 10 | page = parseInt(page); |
| 11 | -var orderList = temp.getOrders(page,10); | |
| 11 | +var orderList = temp.getOrders(page,100); | |
| 12 | 12 | %> |
| 13 | 13 | |
| 14 | 14 | <% |
| ... | ... | @@ -48,83 +48,37 @@ var bodyContent = { |
| 48 | 48 | </div> |
| 49 | 49 | |
| 50 | 50 | <div class="demand-container"> |
| 51 | - <table class="demand-table"> | |
| 52 | - <tr> | |
| 53 | - <th width="100px">货主</th> | |
| 54 | - <th width="100px">运输距离(Km)</th> | |
| 55 | - <th width="120px">运输方式</th> | |
| 56 | - <th width="200px">出发地</th> | |
| 57 | - <th width="200px">目的地</th> | |
| 58 | - <th width="120px">货物类型</th> | |
| 59 | - <th width="100px">重量(吨)</th> | |
| 60 | - <th width="100px">状态</th> | |
| 61 | - <th width="160px">提交时间</th> | |
| 62 | - </tr> | |
| 63 | - <% | |
| 64 | - list = orderList.list; | |
| 65 | - if(!isEmpty(list)){ | |
| 66 | - for(item in list){ %> | |
| 67 | - <tr class="row"> | |
| 68 | - <td width="100px">${item.user_name}</td> | |
| 69 | - <td width="100px">${item.distance}</td> | |
| 70 | - <td width="120px">${item.type}</td> | |
| 71 | - <td width="200px">${item.source_address}</td> | |
| 72 | - <td width="200px">${item.target_address}</td> | |
| 73 | - <td width="120px">${item.goods_category}</td> | |
| 74 | - <td width="100px">${item.goods_weight}</td> | |
| 75 | - <td width="100px">${item.status}</td> | |
| 76 | - <td width="160px">${item.created_date}</td> | |
| 77 | - </tr> | |
| 78 | - <% }} %> | |
| 51 | + <table id="table" class="demand-table"> | |
| 52 | + <thead> | |
| 53 | + <tr> | |
| 54 | + <th width="100px">货主</th> | |
| 55 | + <th width="100px">运输距离(Km)</th> | |
| 56 | + <th width="120px">运输方式</th> | |
| 57 | + <th width="250px">出发地</th> | |
| 58 | + <th width="250px">目的地</th> | |
| 59 | + <th width="120px">货物类型</th> | |
| 60 | + <th width="100px">重量(吨)</th> | |
| 61 | + <th width="160px">发布时间</th> | |
| 62 | + </tr> | |
| 63 | + </thead> | |
| 64 | + <tbody> | |
| 65 | + <% | |
| 66 | + list = orderList.list; | |
| 67 | + if(!isEmpty(list)){ | |
| 68 | + for(item in list){ %> | |
| 69 | + <tr class="row"> | |
| 70 | + <td width="100px">${item.user_name}</td> | |
| 71 | + <td width="100px">${item.distance}</td> | |
| 72 | + <td width="120px">${item.type}</td> | |
| 73 | + <td width="250px">${item.source_address}</td> | |
| 74 | + <td width="250px">${item.target_address}</td> | |
| 75 | + <td width="120px">${item.goods_category}</td> | |
| 76 | + <td width="100px">${item.goods_weight}</td> | |
| 77 | + <td width="160px">${item.created_date}</td> | |
| 78 | + </tr> | |
| 79 | + <% }} %> | |
| 80 | + </tbody> | |
| 79 | 81 | </table> |
| 80 | - | |
| 81 | - <% if(orderList.totalPage > 1){ | |
| 82 | - var currentPage = orderList.pageNumber; | |
| 83 | - var totalPage = orderList.totalPage; | |
| 84 | - var previousPage = currentPage - 1; | |
| 85 | - if (previousPage < 1) { | |
| 86 | - previousPage = 1; | |
| 87 | - } | |
| 88 | - var nextPage = currentPage + 1; | |
| 89 | - if (nextPage > totalPage) { | |
| 90 | - nextPage = totalPage; | |
| 91 | - } | |
| 92 | - %> | |
| 93 | - <div class="pagination"> | |
| 94 | - <a class="first-page page-button" href="${BASE_PATH}product.html?page=1"> | |
| 95 | - 首页 | |
| 96 | - </a> | |
| 97 | - <a class="previous page-button" href="${BASE_PATH}product.html?page=${previousPage}"> | |
| 98 | - 上一页 | |
| 99 | - </a> | |
| 100 | - | |
| 101 | - <%if (currentPage - 2 >= 1) {%> | |
| 102 | - <a class="page" href="${BASE_PATH}product.html?page=${currentPage-2}">${currentPage - 2}</a> | |
| 103 | - <%}%> | |
| 104 | - | |
| 105 | - <%if (currentPage - 1 >= 1) {%> | |
| 106 | - <a class="page" href="${BASE_PATH}product.html?page=${currentPage-1}">${currentPage - 1}</a> | |
| 107 | - <%}%> | |
| 108 | - | |
| 109 | - <a class="page current-page" href="${BASE_PATH}product.html?page=${currentPage}">${currentPage}</a> | |
| 110 | - | |
| 111 | - <%if (currentPage + 1 <= totalPage) {%> | |
| 112 | - <a class="page" href="${BASE_PATH}product.html?page=${currentPage+1}">${currentPage + 1}</a> | |
| 113 | - <% }%> | |
| 114 | - | |
| 115 | - <%if (currentPage + 2 <= totalPage) {%> | |
| 116 | - <a class="page" href="${BASE_PATH}product.html?page=${currentPage+2}">${currentPage + 2}</a> | |
| 117 | - <%}%> | |
| 118 | - | |
| 119 | - <a class="next page-button" href="${BASE_PATH}product.html?page=${nextPage}"> | |
| 120 | - 下一页 | |
| 121 | - </a> | |
| 122 | - | |
| 123 | - <a class="last-page page-button" href="${BASE_PATH}product.html?page=${totalPage}"> | |
| 124 | - 尾页 | |
| 125 | - </a> | |
| 126 | - </div> | |
| 127 | - <%}%> | |
| 128 | 82 | </div> |
| 129 | 83 | </div> |
| 130 | 84 | |
| ... | ... | @@ -329,6 +283,84 @@ var bodyContent = { |
| 329 | 283 | </div> |
| 330 | 284 | |
| 331 | 285 | <% include("/template/web/base/footer.html"){} %> |
| 286 | + | |
| 287 | +<script> | |
| 288 | + // 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动 | |
| 289 | + tableScroll('table', 500, 30, 10) | |
| 290 | + var MyMarhq; | |
| 291 | + | |
| 292 | + function tableScroll(tableid, hei, speed, len) { | |
| 293 | + clearTimeout(MyMarhq); | |
| 294 | + $('#' + tableid).parent().find('.tableid_').remove() | |
| 295 | + $('#' + tableid).parent().prepend( | |
| 296 | + '<table class="tableid_ demand-table"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>' | |
| 297 | + ).css({ | |
| 298 | + 'position': 'relative', | |
| 299 | + 'overflow': 'hidden', | |
| 300 | + 'height': hei + 'px' | |
| 301 | + }) | |
| 302 | + $(".tableid_").find('th').each(function(i) { | |
| 303 | + $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width()); | |
| 304 | + }); | |
| 305 | + $(".tableid_").css({ | |
| 306 | + 'position': 'absolute', | |
| 307 | + 'top': 0, | |
| 308 | + 'left': 0, | |
| 309 | + 'z-index': 9 | |
| 310 | + }) | |
| 311 | + $('#' + tableid).css({ | |
| 312 | + 'position': 'absolute', | |
| 313 | + 'top': 0, | |
| 314 | + 'left': 0, | |
| 315 | + 'z-index': 1 | |
| 316 | + }) | |
| 317 | + | |
| 318 | + if ($('#' + tableid).find('tbody tr').length > len) { | |
| 319 | + $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html()); | |
| 320 | + $(".tableid_").css('top', 0); | |
| 321 | + $('#' + tableid).css('top', 0); | |
| 322 | + var tblTop = 0; | |
| 323 | + var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight(); | |
| 324 | + | |
| 325 | + function Marqueehq() { | |
| 326 | + if ((tblTop - (hei - 52)) <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) { | |
| 327 | + $('#' + tableid).css({ | |
| 328 | + 'position': 'absolute', | |
| 329 | + 'top': 0, | |
| 330 | + 'left': 0, | |
| 331 | + 'z-index': 1, | |
| 332 | + 'transition':'top 0s ease' | |
| 333 | + }) | |
| 334 | + tblTop = 0; | |
| 335 | + } else { | |
| 336 | + $('#' + tableid).css({ | |
| 337 | + 'position': 'absolute', | |
| 338 | + 'top': 0, | |
| 339 | + 'left': 0, | |
| 340 | + 'z-index': 1, | |
| 341 | + 'transition':'top 1s ease' | |
| 342 | + }) | |
| 343 | + tblTop -= 1.5; | |
| 344 | + } | |
| 345 | + $('#' + tableid).css('top', tblTop + 'px'); | |
| 346 | + clearTimeout(MyMarhq); | |
| 347 | + MyMarhq = setTimeout(function() { | |
| 348 | + Marqueehq() | |
| 349 | + }, speed); | |
| 350 | + } | |
| 351 | + | |
| 352 | + MyMarhq = setTimeout(Marqueehq, speed); | |
| 353 | + $('#' + tableid).find('tbody').hover(function() { | |
| 354 | + clearTimeout(MyMarhq); | |
| 355 | + }, function() { | |
| 356 | + clearTimeout(MyMarhq); | |
| 357 | + if ($('#' + tableid).find('tbody tr').length > len) { | |
| 358 | + MyMarhq = setTimeout(Marqueehq, speed); | |
| 359 | + } | |
| 360 | + }) | |
| 361 | + } | |
| 362 | + } | |
| 363 | +</script> | |
| 332 | 364 | <script> |
| 333 | 365 | function changeTab(index) { |
| 334 | 366 | console.log('changeTab', index) | ... | ... |
platform/src/main/webapp/template/web/static/css/product.css
| ... | ... | @@ -230,12 +230,14 @@ |
| 230 | 230 | margin: 0 auto; |
| 231 | 231 | background: #ffffff; |
| 232 | 232 | padding: 0 0 6px 0; |
| 233 | + height: 500px; | |
| 234 | + overflow: hidden; | |
| 233 | 235 | } |
| 234 | 236 | |
| 235 | 237 | .demand-container .pagination { |
| 236 | 238 | justify-content: flex-end; |
| 237 | 239 | } |
| 238 | -.demand-container .demand-table th { | |
| 240 | +.demand-container .demand-table thead tr th { | |
| 239 | 241 | background: #3287FE; |
| 240 | 242 | color: #fff; |
| 241 | 243 | height: 52px; | ... | ... |