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