JS表格，万条数据瞬间加载（转载）

最新推荐文章于 2023-06-18 21:18:35 发布

mzllyl

最新推荐文章于 2023-06-18 21:18:35 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：大数据 javascript 前端 ViewUI

本文链接：https://blog.youkuaiyun.com/mzllyl/article/details/84233605

本文介绍了一种使用滚动条和少量DOM元素实现大量数据快速展示的方法，通过模仿Flex的DataGrid控件，仅创建可视范围内的行，从而显著提高加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Ajax动态加载数据的实际应用中，大家都习惯了一种思维方式：一条数据创建一行。
于是如果数量大的时候，一次性要加载完数据的话，浏览器就会卡上半天

受Flex的DataGrid控件的启发，在Flex的DataGrid控件中，展示数据的方法并不是有多少条数据就创建多少行，它最多只创建你在界面上所看到的十几二十行（假设为n行），如果数据多的话，在滚动过程中，会从数据中抽取你应该看到的这n行数据，重新展示在已经创建好的那n行控件中。
也就是说，Flex的DataGrid控件中，我们实际上看到的仅仅是那n行控件，只是它们展示的数据是根据滚动条状态来筛选出来的。

所以，如果在JS中，也用类似的方法实现，那么就是上万条数据，可能也只要创建几十个Dom而已，效率自然快得多了。
废话不多说，上代码。首先，需要一个滚动条

JScript code

页面代码

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格控件</title>

    <script src="Scrollbar.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    var data = [];
    //创建一万条示例数据
    for (var i = 0; i < 10000; i++) {
        var row = { id: i, text: "text" + i };
        data.push(row);
    }

    //创建滚动条
    var scrbar = new Scrollbar();
    window.onload = function() {
        scrbar.CreateAt("divScroll");
        scrbar.setOptions({ total: 10000,size:300 });
        scrbar.onScroll = function(pos) {
            ShowData(pos);
        }

        //获取模板
        var items = scrbar.getPageItems();
        var tpl = document.getElementById("trTpl");
        tpl.parentNode.removeChild(tpl);

        //仅创建所看到的几十行表格，所以自然快得多
        var list = document.getElementById("tblList");
        for (var i = 0; i < data.length && i < items; i++) {
            var nr = tpl.cloneNode(true);   //从模板行复制新行
            list.appendChild(nr);
        }
        ShowData(scrbar.getPos());
    }
    
    //根据滚动条，展示数据
    function ShowData(pos) {
        var n=scrbar.getPageItems();
        var rows=document.getElementById("tblList").rows;
        for (var i = 0; i < n; i++) {
            var row = rows[i];
            var item = data[i + pos];
            row.cells["tdID"].innerHTML = item["id"];
            row.cells["tdText"].innerHTML = item["text"];
        }
    }
</script>
</head>
<body>
    <div id="divScroll" style="float:right">
    </div>
    <table border="1">
        <!--行标题-->
        <thead><tr>
            <th>ID</th>
            <th>Text</th>
        </tr></thead>
        
        <!--数据展示区-->
        <tbody id="tblList"><tr id="trTpl">
            <td id="tdID">&nbsp;</td>
            <td id="tdText">&nbsp;</td>
        </tr></tbody>
    </table>
</body>
</html>

原文来源：http://topic.youkuaiyun.com/u/20100302/13/dc1c3e79-800f-4f56-94fc-20d844bfede1.html