handsontable 追加数据

在做前端页面的过程中,使用了 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>
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页