在做前端页面的过程中,使用了 easyUI 的布局和 datagrid 表格, 开始时,datagrid 一次循环 50次 appendRow,追加 50 条数据,时间需要 1s,勉强可以接受,后来一次循环 500 次 appendRow,追加 500 条数据,时间需要 10s 以上,分析原因是 datagrid 渲染太耗时。
之后决定选择其他的框架来做表格,搜索发现 handsontable 比较合适,追加数据时渲染速度很快,追加 500条数据用时在 200ms 之内。
handsontable 的官网:https://handsontable.com/
在官网可以下载到免费版的 handsontable,在 dist 目录下找到 handsontable.full.min.css 和 handsontable.full.min.js 进行引用即可。
经过使用,发现 handsontable 的文档写的并不是很好,在实现表格追加数据的功能时走了很多弯路,最终是根据 github 上的一个 issue 解决的,该 issue 的地址:https://github.com/handsontable/handsontable/issues/2343
handsontable 表格追加数据主要使用的方法是 getSourceData()
下面附上测试代码:
testHandsontable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testHandsontable</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/handsontable.full.min.js"></script>
<link rel="stylesheet" media="screen" href="css/handsontable.full.min.css">
</head>
<body>
<button id="load">加载</button>
<div id="example"></div>
</body>
<script type="application/javascript">
var data = [];
var moreData = [];
var oneData = [
'<a href="javascript:void(0)">1</a>',
'<a href="javascript:void(0)">2</a>',
'<a href="javascript:void(0)">3</a>',
'<a href="javascript:void(0)">4</a>',
'<a href="javascript:void(0)">5</a>',
'<a href="javascript:void(0)">6</a>',
'<a href="javascript:void(0)">7</a>',
'<a href="javascript:void(0)">8</a>',
'<a href="javascript:void(0)">9</a>',
'<a href="javascript:void(0)">10</a>',
];
for (var i = 0; i < 5; i++) {
data.push(oneData);
}
var container = document.getElementById('example');
var hot = new Handsontable(container, {
fillHandle: false,
rowHeaders: true,
colHeaders: ["c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10"],
colWidths: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
rowHeaderWidth: 100,
data: data,
editor: false,
renderer: "html"
});
$("#load").click(function(){
for (var i = 0; i < 5; i++) {
hot.getSourceData().push(oneData);
}
hot.render();
});
</script>
</html>