- 常规属性：
1.固定行列位置
fixedRowsTop:行数 //固定顶部多少行不能垂直滚动
fixedColumnsLeft:列数 //固定左侧多少列不能水平滚动
2.拖拽行头或列头改变行或列的大小
manualColumnResize:true/false//当值为true时，允许拖动，当为false时禁止拖动
manualRowResize:true/false//当值为true时，允许拖动，当为false时禁止拖动
3.延伸列的宽度
stretchH：last/all/none //last:延伸最后一列,all:延伸所有列,none默认不延伸。
4.手动固定某一列
manualColumnFreeze: true/false
//当值为true时，选中某 一列，右键菜单会出现freeze this column选项，该选项的作用是固定这一列不可水平滚动，并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column，意思是取消该列的固定，并将其还原到初始位置。
5.拖动行或列到某一行或列之后
manualColumnMove：true/false 当值为true时，列可拖拽移动到指定列
manualRowMove:true/false 当值为true时，行可拖拽至指定行
当属性的值为true时，行头或列头可以被拖拽移动，移动后该行或列将会被移动到指定位置，原先该行或列的后面部分自动上移或后退。移动的时候鼠标需选中行线或列线才行。
6.设置当前行或列的样式
currentRowClassName：当前行样式的名称
currentColClassName：当前列样式的名称
7.行分组或列分组
groups:[{cols:[0,2]},{cols:[3,5]},{rows:[0,4]},{rows:[5,7]}]
上面的例子介绍了4个分组，第0-2列为一组，第3-5列为第二组，第0-4行为一组，第5-7列为第二组。分组可在行头或列头看见，分组可被展开或隐藏。
8.允许排序
columnSorting：true/false/对象 //当值为true时，表示启用排序插件
当值为true时，排序插件的使用可通过点击列头文字实现。当值为false时表示禁用排序。当值为对象时，该对象包含两个属性：column：列数。sortOrder：true/false，升序或降序，true为升序排列。当用对象启动插件后可用如下方式禁用插件：
hot.updateSettings({
columnSorting:false
});
排序的使用也可已直接调用sort()方法实现。如下操作：
if(hot.sortingEnabled){
hot.sort(行数，true/false); //true为升序，false为降序
}
9.显示行头列头
colHeaders:true/fals/数组 //当值为true时显示列头，当值为数组时，列头为数组的值
例如：colHeaders: ['日期', '地点', '商品', '单价', '销量']
rowHeaders：true/false/数组 //当值为true时显示行头，当值为数组时，行头为数组的值
例如：rowHeaders: [1, 2, 3, 4, 5, 6]
10.表格数据
data：[[第一行数据],[第二行数据],...[第n行数据]]/对象数组
获取数据的方法：hot.getData()。
加载数据的方法：hot.loadData(data)。
当不需要显示某一列的时候可用如下格式设置：
columns：[
{data:0},
{data:2}
]
这里就不显示第二列数据，只有第1、3列数据
data可以有两种格式。
第一种是二维数组：
data: [
['日期','销售地点','销售商品','单价','销量'],
['2017-01', '北京', '冰箱', '3399', 530],
['2017-01', '天津', '空调', '4299', 522],
['2017-01', '上海', '洗衣机', '1299', 544],
['2017-01', '广州', '彩电', '4599', 562],
['2017-01', '深圳', '热水器', '1099', 430],
['2017-02', '重庆', '笔记本电脑', '4999', 666],
['2017-02', '厦门', '油烟机', '2899', 438],
['2017-02', '青岛', '饮水机', '899', 620],
['2017-02', '大连', '手机', '1999', 500]
];第二种是对象数组：如果使用该方式渲染数据，则不能使用插入列方法：insert_col和remove_col
data: [
{'date': '2017-01', 'place':'北京', 'goods':'冰箱', 'price':3399, '销量':530},
{'date': '2017-01', 'place':'天津', 'goods':'空调', 'price':4299, '销量':522},
{'date': '2017-01', 'place':'上海', 'goods':'洗衣机', 'price':1299, '销量':544},
{'date': '2017-01', 'place':'广州', 'goods':'彩电', 'price':4599, '销量':562},
{'date': '2017-01', 'place':'深圳', 'goods':'热水器', 'price':1099, '销量':430},
{'date': '2017-02', 'place':'重庆', 'goods':'笔记本电脑', 'price':4999, '销量':666},
{'date': '2017-02', 'place':'厦门', 'goods':'油烟机', 'price':2899, '销量':438},
{'date': '2017-02', 'place':'青岛', 'goods':'饮水机', 'price':1099, '销量':620},
{'date': '2017-02', 'place':'大连', 'goods':'手机', 'price':1999, '销量':500}
]
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，则当你用键盘上下移动数据时，滚动条也会随着焦点上下移动。
By QJL