初识Handsontable

内容源自handsontable的quick start：https://handsontable.com/docs/6.2.2/tutorial-data-binding.html

由作者整理并发布，主要是记录跑案例的过程中遇到的坑~

过程大致是：新建Javaweb项目---->安装node.js（该安装会自动安装npm，是一个包管理器，安装教程建议参照菜鸟教程）---->安装handsontable pro ---->新建div块 ----->新建自己的js文件，案例中的代码直接复制即可。

index.html文件如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>****工作平台</title>
    <!--Handsontable的引用-->
    <script src="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/handsontable-pro@6.2.2/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
    <!--自己的js和css-->
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body class="no-skin">
    <!--handsontable开始的地方-->
    <div id="example"></div>
</body>
</html>

index.js文件如下：

window.onload=function (ev) {
    var data = [
        ["", "Ford", "Tesla", "Toyota", "Honda"],
        ["2017", 10, 11, 12, 13],
        ["2018", 20, 11, 14, 13],
        ["2019", 30, 15, 12, 13]
    ];
    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
        data: data,
        rowHeaders: true,
        colHeaders: true,
        filters: true,
        dropdownMenu: true
    });
}

与官网案例不同的主要是多了一个   window.onload=function (ev) {}，因为没有这个函数，就会报一个错误：cannot read property 'insertBefore' of null。通过百度查看经验，发现是因为页面未加载完成的时候，就执行var container = document.getElementById('example');

导致container为null。

参考资料：

1，https://stackoverflow.com/questions/31780326/cannot-read-property-insertbefore-of-null-handsontable-full-js3714

2，https://stackoverflow.com/questions/36624007/javascript-handsontable-uncaught-typeerror-cannot-read-property-insertbefore

 

posted @ 2019-01-19 16:39  刘云生  阅读(5571)  评论(0)  编辑  收藏  举报