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