内容源自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/[email protected]/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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.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.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