表格左右轮播 + 表格行滚动

最新推荐文章于 2024-07-30 17:43:17 发布

哈罗北鼻1223

最新推荐文章于 2024-07-30 17:43:17 发布

阅读量3.6k

点赞数

分类专栏： .net前端 C#

本文链接：https://blog.csdn.net/u014361482/article/details/81203189

版权

.net前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

参考行滚动的例子，做了表格的左右轮播效果。

前台：

<body align="center">  
    <div class="swiper-container">        
        <div class="swiper-wrapper" id="testdiv"></div>        
        <div class="swiper-pagination"></div>        
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>    
    <script src="Scripts/swiper.min.js" type="text/javascript"></script>   
    <script>
        var obj = <% =bindGrid()%>
        var str = '';
        for (var i in obj.data) {
            str += '<div class="swiper-slide">'
            str += '<div style="overflow-x: auto; overflow-y: auto; height: 99.9%; width:100%;" class="swiper-head">'
            str += '    <div class="logo">'
            str += '        <img src="images/companylog.png" >'
            str += '            <div style="margin-top:25px;font-size: 40px; color:white; margin-left:-40px; display: inline-block;font-family: Microsoft YaHei;">****** 機種:'+ obj.data[i].type +'</div>'           
            str += '    </div>'
            str += '<table class="table" align="center">' +    
                   '    <thead class="fixedThead" align="center">' +
                   '        <tr>' +
                   '            <th>123</th><th>456</th><th>789</th>' +
                   '            <th>1212</th><th>3434</th>' +
                   '        </tr>' +
                   '    </thead>' +
                   '<tbody  id="test'+i+'" class="scrollTbody" align="center">'    //id="test'+i+'"  注意这里
            for (var j in obj.data[i].date) {
                str += '<tr class="tdata"><td>' + obj.data[i].date[j].ModelName + '</td><td>'
                str += obj.data[i].date[j].DistinguishCode + '</td><td>' + obj.data[i].date[j].noneCheckQty + '</td><td>'
                str += obj.data[i].date[j].oqcQty + '</td><td>' + obj.data[i].date[j].mpQty + '</td></tr>'                 
            }
            str += "</tbody></table></div></div>"                                 
        }
        var testdiv = document.getElementById("testdiv");
        testdiv.innerHTML = str
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 600000, //左右滚动时间
            autoplayDisableOnInteraction: false
        });

        function change(table) {
            var row = table.insertRow(table.rows.length); //在table的最后增加一行,table.rows.length是表格的总行数
            for (j = 0; j < table.rows[0].cells.length; j++) {//循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
                var cell = row.insertCell(j); //给新插入的行中添加单元格
                cell.height = "24px"; //一个单元格的高度，跟css样式中的line-height高度一样
                cell.innerHTML = table.rows[0].cells[j].innerHTML; //设置新单元格的内容，这个根据需要，自己设置
            }
            table.deleteRow(0); //删除table的第一行
        };

        function tableInterval() {  
            for (var i in obj.data) {                //注意这里的for循环
                var table = document.getElementById("test"+i); //获得表格
                change(table); //执行表格change函数，删除第一行，最后增加一行，类似行滚动
            }
        };        
        setInterval("tableInterval()", 3000);     //每隔2秒执行一次change函数，相当于table在向上滚动一样         
     </script>
</body>
</html>

后台：

public string bindGrid()
{     

    jsonStr += "{\"data\":[ ";                
    for (int i = 0; i < str.Count(); i++)
    {
        jsonStr += "    {\"type\":\"" + str[i] + "\",\"date\":[";
        sql = "exec *****";                   
        dt1 = _db.ExecuteQueryCommand(sql).Tables[0];
        for (int j = 0; j < dt1.Rows.Count; j++)
        {  
            jsonStr += "{\"aaa\":\"" + dt1.Rows[j]["aaa"].ToString().Trim() + "\"";
            jsonStr += ",\"bbb\":\"" + dt1.Rows[j]["bbb"].ToString().Trim() + "\"";
            jsonStr += ",\"ccc\":\"" + dt1.Rows[j]["ccc"].ToString().Trim() + "\"";
            jsonStr += ",\"ddd\":\"" + dt1.Rows[j]["ddd"].ToString().Trim() + "\"";
            jsonStr += ",\"eee\":\"" + dt1.Rows[j]["eee"].ToString().Trim()) + "\"},";
         }
         jsonStr = jsonStr.Remove(jsonStr.Length - 1,1);
         jsonStr += "    ]";
         jsonStr += "},";
   }
   jsonStr = jsonStr.Remove(jsonStr.Length - 1, 1);                    
   jsonStr += "]}";
 
   return jsonStr;
}