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,则当你用键盘上下移动数据时,滚动条也会随着焦点上下移动

目录
相关文章
|
JavaScript
Vue vue-config.js(字段属性详细介绍)
Vue vue-config.js(字段属性详细介绍)
85 2
|
5月前
|
JavaScript 前端开发 安全
【vue】如何修改iview组件的样式(element同)
【vue】如何修改iview组件的样式(element同)
64 1
|
3月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
5月前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
N..
|
5月前
|
JavaScript 前端开发 数据处理
Vue.js的过滤器和监听属性
Vue.js的过滤器和监听属性
N..
41 1
|
5月前
|
JavaScript
【vue】 vue2 修改网页标题和图标logo、全局路径、跨域vue.config.js
【vue】 vue2 修改网页标题和图标logo、全局路径、跨域vue.config.js
341 0
|
缓存 前端开发 JavaScript
修改Antd默认样式总结
修改Antd默认样式总结
1349 0
|
缓存 JavaScript
Vue.js计算属性和监听属性
Vue.js计算属性和监听属性
145 0
|
JavaScript 容器
vue2 自定义全局Loading组件
主要用到了Vue 的构造器extend 他可以接受一个已有组件也可以自定义组件
448 0
|
JavaScript
vue.js样式绑定02(动态改字体)
vue.js样式绑定02(动态改字体)
164 0