Handsontable - 配置属性(下)

简介: Handsontable - 配置属性(下)

11、右键菜单展示

contextMenu: true/false/自定义数组 // 当值为true时,启用右键菜单,为false时禁用

例如:contextMenu: ["row_above", "row_below", "col_left", "col_right", "remove_row", "remove_col", "---------", "undo", "redo", "Read Only", "alignment", "Merge Cells"]

12、自适应列大小

autoColumnSize: true/false // 当值为true且列宽未设置时,自适应列大小

13、minCols:最小列数

minRows:最小行数

minSpareCols:最小列空间,不足则添加空列

maxCols:最大列数

maxRows:最大行数

minSpareRows:最小行空间,不足则添加空行

14、observeChanges:true/false

// 当值为true时,启用observeChanges插件

15.colWidths:[列宽1,列宽2,...]/列宽值

// 例如
var hot = new Handsontable(container, {  
    data: data,  
    observeChanges: true,  
    colHeaders: true,  
    rowHeaders: true,  
    colWidths: 70,  //colWidths: [100, 200, 300, 200, 100]
    contextMenu: false,  
    manualRowResize: true,  
    manualColumnResize: true,  
    minSpareRows: 30,  
    cells: function(row, col, prop) {//单元格渲染  
            this.renderer = myRenderer;  
    },  
    mergeCells: true 
});

16、自定义边框设置,可以进行初始化配置,如下:

customBorders: [{range:{from:{row:行数,col:列数},to:{row:行数,col:列数},上下左右设置}]

hot = Handsontable(container, {  
    data: Handsontable.helper.createSpreadsheetData(200, 20),  
    rowHeaders: true,  
    fixedColumnsLeft: 2,  
    fixedRowsTop: 2,  
    colHeaders: true,  
    customBorders: [  
      {  
        range: {//多个单元格  
          from: {//起始位置  
            row: 1,  
            col: 1  
          },  
          to: {  
            row: 3,  
            col: 4  
          }  
        },  
        top: {//结束位置  
          width: 2,  
          color: '#5292F7' 
        },  
        left: {  
          width: 2,  
          color: 'orange' 
        },  
        bottom: {  
          width: 2,  
          color: 'red' 
        },  
        right: {  
          width: 2,  
          color: 'magenta' 
        }  
      },  
      {//单一单元格  
        row: 2,  
        col: 2,  
        left: {  
          width: 2,  
          color: 'red' 
        },  
        right: {  
          width: 1,  
          color: 'green' 
        }  
      }]  
  });


也可以声明customBorder:true,表示允许自定义单元格边框。

用range指定一个范围,或者直接使用row、col指定单元格位置,用top、right、bottom、left分别设置单元格上下左右边框的属性。

customBorders: [
    {
        range: {
            from: {row: 1, col:1},
            to: {row: 3, col:3}
        },
        top: {width: 2, color: '#25e825'},
        right: {width: 2, color: '#25e825'},
        bottom: {width: 2, color: '#25e825'},
        left: {width: 2, color: '#25e825'}
    },
    {
        row: 2,
        col: 2,
        top: {width: 2, color: '#7687c5'},
        right: {width: 2, color: '#7687c5'},
        bottom: {width: 2, color: '#7687c5'},
        left: {width: 2, color: '#7687c5'}
    }
]

image.png

17、单元格合并可以进行初始化配置,如下:

mergeCells: [{row: 起始行数, col: 起始列数, rowspan: 合并行数, colspan:合并列数 },...],

例如:

mergeCells: [

{row:0, col:0, rowspan:5, colspan:1},

{row:5, col:0, rowspan:4, colspan:1}

]

也可以先声明单元格允许合并,mergeCells:true,再利用合并方法操作。


hot = new Handsontable(container, {  
    data: data,  
    observeChanges: true,  
    colHeaders: true,  
    rowHeaders: true,  
    colWidths: 70,  
    contextMenu: false,  
    manualRowResize: true,  
    manualColumnResize: true,  
    // minSpareRows: 30,  
   cells: function(row, col, prop) {  
         this.renderer = myRenderer;       
   },  
   mergeCells: true

18、className

// 容器单元格的class属性(htCenter,htLeft,htRight,htJustify,htTop,htMiddle,htBottom),默认值undefined,这些属性将作为容器单元格内容的对齐方式

19、cell

// 指定单元格的某些属性(数组),如下:
cell: [
    {row:0, col:0, className: 'htRight htMiddle', editor: false}, // 右对齐垂直居中,只读
    {row:1, col:1, className: 'htLeft'} // 左对齐
]

20、startRows

// 初始行数

21、startCols

// 初始列数

22、wordWrap

// 自动换行,默认true

23、copyable

// 是否允许键盘复制

默认true,如下面的官网说明,这个只适用于键盘上CTRL + C的复制,不适用于拖动复制。

Make cell copyable (pressing CTRL + C on your keyboard moves its value to system clipboard).

Note: this setting is false by default for cells with type password.

24、fillHandle

// 是否允许拖动复制

默认true,也可以控制方向:fillHandle: 'vertical'

如果设置为false,则选中单元格后,在右下方不会出现可以拖动的点

25、renderAllRows

// 是否呈现所有行

如果键入true,将禁用handsontable的虚拟呈现机制。

也就是说如果键入true,则当你用键盘上下移动数据时,handsontable中的数据不会随着焦点的下移或上移同步移动;

如果是false,则当你用键盘上下移动数据时,滚动条也会随着焦点上下移动

目录
相关文章
vue3 element-plus 实现表格数据更改功能
在 vue3 中使用 element-plus 实现表格数据更改功能,可以通过以下步骤实现:
1458 0
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
1077 1
echarts修改tooltip默认样式(使用formatter函数拼接加工)
echarts修改tooltip默认样式(使用formatter函数拼接加工)
737 0
|
前端开发 Shell API
强大的类excel插件,handsontable的简单应用
强大的类excel插件,handsontable的简单应用
459 1
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
8784 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
11月前
|
缓存 UED
|
11月前
|
开发框架 前端开发 API
C#/.NET/.NET Core优秀项目和框架2024年9月简报
C#/.NET/.NET Core优秀项目和框架2024年9月简报
188 1
|
Java UED
基于SpringBoot自定义线程池实现多线程执行方法,以及多线程之间的协调和同步
这篇文章介绍了在SpringBoot项目中如何自定义线程池来实现多线程执行方法,并探讨了多线程之间的协调和同步问题,提供了相关的示例代码。
3338 0
|
IDE Linux 开发工具
IntelliJ IDEA2022破解IDEA2022.2永久破解激活教程
IDEA 目前已经更新到最新的 2022.2.2 版本了,群里的小伙伴私聊问我,为啥之前 2021.3.1 的激活套路对新版本 2022.2.2 不管用了,是个什么情况? 很显然,IDEA 官方发现了这种破解路数,新版本加入了更严厉的反制破解。所以说,小伙伴们破解成功了以后,尽量不要升级 IDEA, 不然大概率又不行了。 好在z大又更新了新的补丁,针对最新版本,这边笔者亲测可行,仅以下文记录本人 IntelliJ IDEA 2022.2.2 版本的激活破解到 2099 年的全过程,步骤非常详细,跟着图文来就行~
62354 3
IntelliJ IDEA2022破解IDEA2022.2永久破解激活教程
|
资源调度 JavaScript Windows
'vue-cli-service' 不是内部或外部命令,也不是可运行的程序问题解决
【5月更文挑战第7天】'vue-cli-service' 不是内部或外部命令,也不是可运行的程序问题解决
19292 3