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

目录
相关文章
|
6月前
|
JavaScript 前端开发 安全
【vue】如何修改iview组件的样式(element同)
【vue】如何修改iview组件的样式(element同)
86 1
|
JavaScript
js: 获取标签元素data-*属性值的方法
js: 获取标签元素data-*属性值的方法
298 0
|
1月前
|
JavaScript 数据可视化 开发者
echart:里面的属性
这段内容介绍了图表配置中的多个关键组件和属性,包括 `xAxis` 和 `yAxis` 的常见属性设置、`grid` 的布局调整、`dataZoom` 的数据缩放功能、`legend` 的图例配置以及颜色配置等。通过这些配置,可以实现图表的自定义显示,如坐标轴类型、数据源、最小值、最大值、刻度间隔、标签样式、线条样式等,同时还能调整图表在 DOM 元素中的大小和位置,以及实现数据的缩放和平滑交互效果。
|
缓存 JavaScript
Vue常用属性(计算属性和侦听器属性)
Vue常用属性(计算属性和侦听器属性)
Echarts仪盘表属性值设置带来更多意料不到的效果
Echarts仪盘表属性值设置带来更多意料不到的效果
57 0
|
JavaScript
JS中如何通过属性获取属性值
JS中如何通过属性获取属性值
139 0
|
缓存 JavaScript
Vue.js计算属性和监听属性
Vue.js计算属性和监听属性
151 0
Handsontable - getSourceData 和 getData 区别
Handsontable - getSourceData 和 getData 区别
141 0
Handsontable - getSourceData 和 getData 区别
Handsontable - 配置属性(上)
Handsontable - 配置属性(上)
377 0