Html下显示表格插件-handsontable

最新推荐文章于 2021-06-08 22:45:43 发布

tqtiwvfdn

最新推荐文章于 2021-06-08 22:45:43 发布

阅读量3.4k

点赞数

本文链接：https://blog.csdn.net/tqtiwvfdn/article/details/44239457

版权

前端同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Web

19 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

options:https://github.com/handsontable/handsontable/wiki/Options

官方网页：http://handsontable.com/

实例：

({
    data: [
        ['', '', '千订单差评量', '', '', '', '', '', '', '', ''],
        ['', '', '合计', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        ['区域属性', 'A运行中心', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', 'B运行中心', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', 'C运行中心', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', 'D运行中心', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', 'E运行中心', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', 'F运行中心', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', 'G运行中心', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', 'H运行中心', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '无区域', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店1', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店2', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店3', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店4', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店5', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店6', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店7', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店8', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '直营店9', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
        ['', '合计', '25.0', '28.4', '29.1', '25.2', '23.9', '24.0', '21.2', '25.9', '23.2'],
    ],//需要修改
    columns:[
        {readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true},{readOnly:true}
    ],//需要修改
    autoColumnSize:true,
    autoWrapCol: true,
    autoWrapRow: true,
    colHeaders: true,
    rowHeaders: false,
    //columnSorting: true,//是否打开列排序 默认是false
    fixedColumnsLeft: 2,//允许对表的左边的列中指定的固定（又名冻结）的数
    fixedRowsTop: 2,//允许对表的顶部指定行数固定的（又名冻结）的数
    mergeCells: [
        //{ row: 0, col: 0, rowspan: 2, colspan: 2 },
        { row: 2, col: 0, rowspan: 19, colspan: 1 },
        { row: 0, col: 2, rowspan: 1, colspan: 9 }
    ],//合并的列
    enterBeginsEditing: false,
    manualColumnResize: true,   
    manualRowResize: true,
})