如何在 JavaScript 中为数百万行创建数据网格？

在 JavaScript 中，使用一个简单的循环最多可以显示10 ⁵个。这也取决于浏览器运行如此复杂的大循环的能力。当浏览器完成如此庞大的任务时，页面会崩溃。下面的代码是我们如何填充10 ⁵行的表的示例。

示例 1：此示例将展示我们如何使用简单的 JavaScript 代码填充一个包含 10 ⁵行的表。

  

    
        table {
            width: 100%;
        }
          
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
          
        th,
        td {
            padding: 15px;
            text-align: left;
        }
          
        table#t01 tr:nth-child(even) {
            background-color: #eee;
        }
          
        table#t01 tr:nth-child(odd) {
            background-color: #fff;
        }
          
        table#t01 th {
            background-color: black;
            color: white;
        }
    

  

    
  
    
        
            
            
        
        
    CountingAlphabets
            var k = 97;
            for (var j = 1; j <= 100000; j++) {
                if (k == 123)
                    k = 97;
                var string = String.fromCharCode(k);
                document.write(" <tr><td>" + (j) + "</td><td>" 
                               + string + "</td></tr>");
                k++;
            }
        
  

  

输出：

100 万行的性能
为了执行如此繁重的任务，我们将导入由 shield UI 制作的 API。它是一个用于加载大网格的轻量级 API，它实际上是实时加载网格的，即当我们向下滚动表格时，从而减少了浏览器在该时间实例上的负载。

现在让我们对 100 万行（即 10 ⁶行）执行相同的操作。下面的代码将实时加载 100 万行。
例子：

  

    
    1 Million Rows Demo
    
    
  
    
  

  

    
    
        $(function() {
            var grid = new shield.DataSource({
                remote: {
                    operations: ["skip", "take"],
                    read: function(params, success, error) {
                        var skip = grid.skip || 0,
                            take = grid.take || 20,
                            data = [],
                            k = 96;
  
                        for (var i = skip; i < skip + take; i++) {
                            k++;
                            var row = {};
                            for (var j = 1; j < 3; j++) {
                                row["Counting"] = i + 1;
                                if (k == 123)
                                    k = 97;
                                var string = String.fromCharCode(k);
                                row["Alphabets"] = string;
                            }
                            data.push(row);
                        }
                        success({
                            data: data,
                            total: 1000000
                        });
                    }
                },
                schema: {
                    data: "data",
                    total: "total"
                }
            });
            $("#grid").shieldGrid({
                dataSource: grid,
                height: 400,
                scrolling: {
                    virtual: true
                },
                columns: (function() {
                    var cols = [];
  
                    cols.push({
                        field: "Counting",
                        width: 140
                    });
  
                    cols.push({
                        field: "Alphabets",
                        width: 140
                    });
                    return cols;
                })()
            });
        });
    

  

输出：