handsontable學習（1）——基本使用

1、下載javascript

npm install handsontable

2、拷貝js和css文件到項目下，js和css文件在下載的路徑以下：css

　　**\node_modules\handsontable\disthtml

3、簡單使用示例：java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>handsontable測試</title>
        <link rel="stylesheet" type="text/css" href="js/handsontable.full.min.css" />
    </head>
    <body>
        <div id="example"></div>
        <script src="js/handsontable.full.min.js"></script>
        <script type="text/javascript"> const data = [ ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'], ['2019', 10, 11, 12, 13], ['2020', 20, 11, 14, 13], ['2021', 30, 15, 12, 13] ]; const container = document.getElementById('example'); const hot = new Handsontable(container, { data: data, rowHeaders: true, colHeaders: true, licenseKey: 'non-commercial-and-evaluation'//商業活動請購買祕鑰,學習可以使用'non-commercial-and-evaluation' }); </script>
    </body>
</html>

運行結果：node

4、自定義表頭，經過定義colHeaders的值：npm

示例：學習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>handsontable測試</title>
        <link rel="stylesheet" type="text/css" href="js/handsontable.full.min.css" />
    </head>
    <body>
        <div id="example"></div>
        <div id="example1"></div>
        <div id="example2"></div>
        <script src="js/handsontable.full.min.js"></script>
        <script type="text/javascript"> const data = [ ['2019', 10, 11, 12, 13], ['2020', 20, 11, 14, 13], ['2021', 30, 15, 12, 13] ]; const container = document.getElementById('example'); const hot = new Handsontable(container, { data: data, rowHeaders: true, colHeaders: ['年份','Tesla','Volvo', 'Toyota', 'Ford'], filters: true, // dropdownMenu: true,
 licenseKey: 'non-commercial-and-evaluation' //商業活動請購買祕鑰,學習可以使用'non-commercial-and-evaluation'
 }); </script>
    </body>
</html>

運行結果以下：測試