handsontable 追加数据

最新推荐文章于 2024-06-28 14:48:19 发布

原创最新推荐文章于 2024-06-28 14:48:19 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

在做前端页面的过程中，使用了 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>