handsometable学习(1)——基本使用

一、下载

npm install handsontable

二、拷贝js和css文件到项目下,js和css文件在下载的路径如下:

  **\node_modules\handsontable\dist

三、简单使用示例:

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>handsometable测试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>

运行结果:

 handsometable学习(1)——基本使用_第1张图片

 四、自定义表头,通过定义colHeaders的值:

示例:

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>handsometable测试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>

运行结果如下:

handsometable学习(1)——基本使用_第2张图片

 

转载于:https://www.cnblogs.com/lkc9/p/10823865.html

你可能感兴趣的:(handsometable学习(1)——基本使用)