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