极客教程JavaScript 如何创建可以容纳数百万行数据的数据网格
在JavaScript中，可以使用简单的循环显示多达 10 5行数据。这还取决于浏览器运行如此庞大复杂的循环的能力。当将如此庞大的任务交给浏览器时，页面会崩溃。下面的代码是一个示例，演示了如何填充一个包含 10 5行的表格。
示例1：这个示例将展示如何使用简单的JavaScript代码填充一个包含 10 5行的表格。
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<br>
<table id="t01">
<tr>
<th>Counting</th>
<th>Alphabets</th>
</tr>
<script>
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++;
}
</script>
</table>
</body>
</html>
结果：
1百万行的性能
为了执行这样一个繁重的任务，我们将导入由shield UI制作的API。这是一个轻量级的用于加载大表格的API，实际上它是在我们滚动表格时实时加载表格，从而减少了浏览器在那个时间点上的负载。
现在让我们对1百万行执行相同的操作，即10 6 行。下面的代码将实时加载1百万行。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>1 Million Rows Demo</title>
<link id="themecss"
rel="stylesheet"
type="text/css"
href=
"//www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript"
src=
"//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js">
</script>
<script type="text/javascript"
src=
"//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js">
</script>
</head>
<body class="theme-light">
<div id="grid" style="margin-bottom: -500px;"></div>
<script type="text/javascript">
(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("#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;
})()
});
});
</script>
</body>
</html>
输出：
