handsontable学习（4）——具体使用

本文以注释的方式标明了各个属性的功能。

(如果引用的js或者css不能使用了，可自己下载之后引用本地的js和css)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>handsontable测试</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@7.0.2/dist/handsontable.full.min.css" />
    </head>
    <body>
        <div id="example"></div>

        <script src="https://cdn.jsdelivr.net/npm/handsontable@7.0.2/dist/handsontable.full.min.js"></script>
        <script type="text/javascript">
            var objectData = [{
                        id: 1,
                        name: 'Ted Right',
                        address: '重庆',
                        content: '其它'
                    },
                    {
                        id: 2,
                        name: 'Frank Honest',
                        address: '北京',
                        content: '其它'
                    },
                    {
                        id: 3,
                        name: 'Joan Well',
                        address: '天津',
                        content: '其它'
                    },
                    {
                        id: 4,
                        name: 'Gail Polite',
                        address: '内蒙',
                        content: '其它'
                    },
                    {
                        id: 5,
                        name: 'Michael Fair',
                        address: '黑龙江',
                        content: '其它'
                    },
                ],
                container = document.getElementById('example');
            
            //通过 JSON.parse(JSON.stringify(object)) 的方式,将数据的副本绑定到handsontable,这样handsontable改变数据的时候,不会影响到数据源,只会影响到副本
            var dataCopy=JSON.parse(JSON.stringify(objectData));

            var hot = new Handsontable(container, {
                //调用handsometable的绑定数据的方式是: hot.getData()
                data: dataCopy,
                //定义数据源为空时,handsontable的数据格式
                dataSchema: {
                    id: null,
                    name: null,
                    address: null,
                    content: null
                },
                colWidths: 300, //列宽
                rowHeights: 83, //行高
                //通过定义width和height来决定容器的宽和高,当内容超出时,便会显示滚动条
                height: 450,
                width: '50%',
                //通过设置fixedRowsTop来决定滚动时,锁定的行;通过设置fixedColumnsLeft来决定滚动时,锁定的列
                fixedColumnsLeft: 2,
                //设置列名
                colHeaders: ['', '姓名', '地址', '备注'],
                //设置显示行索引
                rowHeaders: true,
                //许可秘钥
                licenseKey: 'non-commercial-and-evaluation',
                //留出一行空白,用作新增
                minSpareRows: 1,
                //隐藏的列索引 例:columns:[0,1,2],隐藏0,1,2三列
                //如果需要显示隐藏列的位置标识,可以在hiddenColumns中加上 indicators: true
                hiddenColumns: {
                    columns: [0]
                },
                //className用作定义表格的对齐方式,多个值用空格隔开
                //水平方向上的值: htLeft, htCenter, htRight, htJustify
                //垂直方向上的值: htTop, htMiddle, htBottom
                className: "htCenter htMiddle",
                //定义列和数据源的映射关系和一些其它属性
                columns: [
                    {
                        data: 'id'
                    },
                    {
                        data: 'name',
                        // readOnly: true //定义为只读列
                    },
                    {
                        data: 'address'
                    },
                    {
                        data: 'content'
                    },
                ],
                //当table数据发生改变的相应事件
                afterChange: function(change, source) {
                    //change[0]是一个数组,第一个值是行索引/行名,第二个值是列索引/列名,第三个值是修改前的值,第四个值是修改后的值
                    //source的值目前知道:loadData(加载数据);edit(新增或编辑)
                    if (source === 'loadData') {
                        return;
                    }
                    
                    //如果修改的列是ID列,不作处理,防止进入死循环
                    if(change[0][1]=='id'){
                        return;
                    }
                    if (dataCopy[change[0][0]].id==null) {
                        console.log("新增");
                        //生成新列的ID
                        let mId=new Date().getTime();
                        hot.setDataAtCell(change[0][0],0,mId);
                        console.log("新ID："+mId);
                    } else {
                        console.log("修改了ID为：" + dataCopy[change[0][0]].id + "的数据,值由" + change[0][2] + "修改为：" + change[0][3]);
                    }
                }
            });
        </script>
    </body>
</html>

这里只演示了一些常见的功能，更多功能请参考官网API：https://handsontable.com/docs/7.0.2/tutorial-quick-start.html

posted @ 2019-05-08 09:53  lkc9  阅读(969)  评论(0)    收藏  举报