From ec4fd9ee220aac62497c427ab5895cf92f16459b Mon Sep 17 00:00:00 2001
From: lxh <1976462645@qq.com>
Date: Tue, 2 Feb 2021 19:20:36 +0800
Subject: [PATCH] feat: 需求表格自动滚动

---
 platform/src/main/webapp/template/web/home/product.html      | 186 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------
 platform/src/main/webapp/template/web/static/css/product.css |   4 +++-
 2 files changed, 112 insertions(+), 78 deletions(-)

diff --git a/platform/src/main/webapp/template/web/home/product.html b/platform/src/main/webapp/template/web/home/product.html
index 2701758..0a6acb6 100644
--- a/platform/src/main/webapp/template/web/home/product.html
+++ b/platform/src/main/webapp/template/web/home/product.html
@@ -8,7 +8,7 @@ if(isEmpty(page)){
 page = 1;
 }
 page = parseInt(page);
-var orderList = temp.getOrders(page,10);
+var orderList = temp.getOrders(page,100);
 %>
 
 <%
@@ -48,83 +48,37 @@ var bodyContent = {
         </div>
 
         <div class="demand-container">
-            <table class="demand-table">
-                <tr>
-                    <th width="100px">货主</th>
-                    <th width="100px">运输距离(Km)</th>
-                    <th width="120px">运输方式</th>
-                    <th width="200px">出发地</th>
-                    <th width="200px">目的地</th>
-                    <th width="120px">货物类型</th>
-                    <th width="100px">重量(吨)</th>
-                    <th width="100px">状态</th>
-                    <th width="160px">提交时间</th>
-                </tr>
-                <%
-                list = orderList.list;
-                if(!isEmpty(list)){
-                for(item in list){ %>
-                <tr class="row">
-                    <td width="100px">${item.user_name}</td>
-                    <td width="100px">${item.distance}</td>
-                    <td width="120px">${item.type}</td>
-                    <td width="200px">${item.source_address}</td>
-                    <td width="200px">${item.target_address}</td>
-                    <td width="120px">${item.goods_category}</td>
-                    <td width="100px">${item.goods_weight}</td>
-                    <td width="100px">${item.status}</td>
-                    <td width="160px">${item.created_date}</td>
-                </tr>
-                <% }} %>
+            <table id="table" class="demand-table">
+                <thead>
+                    <tr>
+                        <th width="100px">货主</th>
+                        <th width="100px">运输距离(Km)</th>
+                        <th width="120px">运输方式</th>
+                        <th width="250px">出发地</th>
+                        <th width="250px">目的地</th>
+                        <th width="120px">货物类型</th>
+                        <th width="100px">重量(吨)</th>
+                        <th width="160px">发布时间</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <%
+                    list = orderList.list;
+                    if(!isEmpty(list)){
+                    for(item in list){ %>
+                    <tr class="row">
+                        <td width="100px">${item.user_name}</td>
+                        <td width="100px">${item.distance}</td>
+                        <td width="120px">${item.type}</td>
+                        <td width="250px">${item.source_address}</td>
+                        <td width="250px">${item.target_address}</td>
+                        <td width="120px">${item.goods_category}</td>
+                        <td width="100px">${item.goods_weight}</td>
+                        <td width="160px">${item.created_date}</td>
+                    </tr>
+                    <% }} %>
+                </tbody>
             </table>
-
-            <% if(orderList.totalPage > 1){
-            var currentPage = orderList.pageNumber;
-            var totalPage = orderList.totalPage;
-            var previousPage = currentPage - 1;
-            if (previousPage < 1) {
-            previousPage = 1;
-            }
-            var nextPage = currentPage + 1;
-            if (nextPage > totalPage) {
-            nextPage = totalPage;
-            }
-            %>
-            <div class="pagination">
-                <a class="first-page page-button" href="${BASE_PATH}product.html?page=1">
-                    首页
-                </a>
-                <a class="previous page-button" href="${BASE_PATH}product.html?page=${previousPage}">
-                    上一页
-                </a>
-
-                <%if (currentPage - 2 >= 1) {%>
-                <a class="page" href="${BASE_PATH}product.html?page=${currentPage-2}">${currentPage - 2}</a>
-                <%}%>
-
-                <%if (currentPage - 1 >= 1) {%>
-                <a class="page" href="${BASE_PATH}product.html?page=${currentPage-1}">${currentPage - 1}</a>
-                <%}%>
-
-                <a class="page current-page" href="${BASE_PATH}product.html?page=${currentPage}">${currentPage}</a>
-
-                <%if (currentPage + 1 <= totalPage) {%>
-                <a class="page" href="${BASE_PATH}product.html?page=${currentPage+1}">${currentPage + 1}</a>
-                <% }%>
-
-                <%if (currentPage + 2 <= totalPage) {%>
-                <a class="page" href="${BASE_PATH}product.html?page=${currentPage+2}">${currentPage + 2}</a>
-                <%}%>
-
-                <a class="next page-button" href="${BASE_PATH}product.html?page=${nextPage}">
-                    下一页
-                </a>
-
-                <a class="last-page page-button" href="${BASE_PATH}product.html?page=${totalPage}">
-                    尾页
-                </a>
-            </div>
-            <%}%>
         </div>
     </div>
 
@@ -329,6 +283,84 @@ var bodyContent = {
 </div>
 
 <%  include("/template/web/base/footer.html"){} %>
+
+<script>
+    // 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
+    tableScroll('table', 500, 30, 10)
+    var MyMarhq;
+
+    function tableScroll(tableid, hei, speed, len) {
+        clearTimeout(MyMarhq);
+        $('#' + tableid).parent().find('.tableid_').remove()
+        $('#' + tableid).parent().prepend(
+            '<table class="tableid_ demand-table"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
+        ).css({
+            'position': 'relative',
+            'overflow': 'hidden',
+            'height': hei + 'px'
+        })
+        $(".tableid_").find('th').each(function(i) {
+            $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
+        });
+        $(".tableid_").css({
+            'position': 'absolute',
+            'top': 0,
+            'left': 0,
+            'z-index': 9
+        })
+        $('#' + tableid).css({
+            'position': 'absolute',
+            'top': 0,
+            'left': 0,
+            'z-index': 1
+        })
+
+        if ($('#' + tableid).find('tbody tr').length > len) {
+            $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
+            $(".tableid_").css('top', 0);
+            $('#' + tableid).css('top', 0);
+            var tblTop = 0;
+            var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
+
+            function Marqueehq() {
+                if ((tblTop - (hei - 52)) <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
+                    $('#' + tableid).css({
+                        'position': 'absolute',
+                        'top': 0,
+                        'left': 0,
+                        'z-index': 1,
+                        'transition':'top 0s ease'
+                    })
+                    tblTop = 0;
+                } else {
+                    $('#' + tableid).css({
+                        'position': 'absolute',
+                        'top': 0,
+                        'left': 0,
+                        'z-index': 1,
+                        'transition':'top 1s ease'
+                    })
+                    tblTop -= 1.5;
+                }
+                $('#' + tableid).css('top', tblTop + 'px');
+                clearTimeout(MyMarhq);
+                MyMarhq = setTimeout(function() {
+                    Marqueehq()
+                }, speed);
+            }
+
+            MyMarhq = setTimeout(Marqueehq, speed);
+            $('#' + tableid).find('tbody').hover(function() {
+                clearTimeout(MyMarhq);
+            }, function() {
+                clearTimeout(MyMarhq);
+                if ($('#' + tableid).find('tbody tr').length > len) {
+                    MyMarhq = setTimeout(Marqueehq, speed);
+                }
+            })
+        }
+    }
+</script>
 <script>
     function changeTab(index) {
         console.log('changeTab', index)
diff --git a/platform/src/main/webapp/template/web/static/css/product.css b/platform/src/main/webapp/template/web/static/css/product.css
index 798145b..6f96f50 100644
--- a/platform/src/main/webapp/template/web/static/css/product.css
+++ b/platform/src/main/webapp/template/web/static/css/product.css
@@ -230,12 +230,14 @@
     margin: 0 auto;
     background: #ffffff;
     padding: 0 0 6px 0;
+    height: 500px;
+    overflow: hidden;
 }
 
 .demand-container .pagination {
     justify-content: flex-end;
 }
-.demand-container .demand-table th {
+.demand-container .demand-table thead tr th {
     background: #3287FE;
     color: #fff;
     height: 52px;
--
libgit2 0.21.2