码迷,mamicode.com
首页 > 其他好文 > 详细

初识Handsontable

时间:2019-01-19 17:30:30      阅读:445      评论:0      收藏:0      [点我收藏+]

标签:star   不同的   地方   nta   erro   函数   example   err   参考资料   

内容源自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

 

初识Handsontable

标签:star   不同的   地方   nta   erro   函数   example   err   参考资料   

原文地址:https://www.cnblogs.com/cquer-xjtuer-lys/p/10292194.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!