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,7 +8,7 @@ if(isEmpty(page)){ | ||
| 8 | page = 1; | 8 | page = 1; |
| 9 | } | 9 | } |
| 10 | page = parseInt(page); | 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,83 +48,37 @@ var bodyContent = { | ||
| 48 | </div> | 48 | </div> |
| 49 | 49 | ||
| 50 | <div class="demand-container"> | 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 | </table> | 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 | </div> | 82 | </div> |
| 129 | </div> | 83 | </div> |
| 130 | 84 | ||
| @@ -329,6 +283,84 @@ var bodyContent = { | @@ -329,6 +283,84 @@ var bodyContent = { | ||
| 329 | </div> | 283 | </div> |
| 330 | 284 | ||
| 331 | <% include("/template/web/base/footer.html"){} %> | 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 | <script> | 364 | <script> |
| 333 | function changeTab(index) { | 365 | function changeTab(index) { |
| 334 | console.log('changeTab', index) | 366 | console.log('changeTab', index) |
platform/src/main/webapp/template/web/static/css/product.css
| @@ -230,12 +230,14 @@ | @@ -230,12 +230,14 @@ | ||
| 230 | margin: 0 auto; | 230 | margin: 0 auto; |
| 231 | background: #ffffff; | 231 | background: #ffffff; |
| 232 | padding: 0 0 6px 0; | 232 | padding: 0 0 6px 0; |
| 233 | + height: 500px; | ||
| 234 | + overflow: hidden; | ||
| 233 | } | 235 | } |
| 234 | 236 | ||
| 235 | .demand-container .pagination { | 237 | .demand-container .pagination { |
| 236 | justify-content: flex-end; | 238 | justify-content: flex-end; |
| 237 | } | 239 | } |
| 238 | -.demand-container .demand-table th { | 240 | +.demand-container .demand-table thead tr th { |
| 239 | background: #3287FE; | 241 | background: #3287FE; |
| 240 | color: #fff; | 242 | color: #fff; |
| 241 | height: 52px; | 243 | height: 52px; |