Handsontable对单元格的操作
原文地址:http://blog.csdn.net/mafan121/article/details/46119905
1.自动填充单元格数据
fillHandle：true/false //当值为true时，允许拖动单元格右下角，将其值自动填充到选中的单元格
2.合并单元格
初始化配置：mergeCells：[{row:起始行数,cols:起始列数,rowspan:合并的行数,colspan:合并的列数},...]
或者初始化声明：mergeCells:true //表示允许单元格合并
但单元格合并的操作，需如下操作：
1 if(key == "merge") { 2 if(hot.mergeCells.mergedCellInfoCollection.length > 0) { 3 for(var k=0; k<hot.mergeCells.mergedCellInfoCollection.length; k++) { 4 if(hot.mergeCells.mergedCellInfoCollection[k].row == row && 5 hot.mergeCells.mergedCellInfoCollection[k].col == col) { 6 hot.mergeCells.mergedCellInfoCollection.splice(k,1); 7 return; 8 }else{ 9 hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, 10 "rowspan": rowspan, "colspan": colspan}); 11 break; 12 } 13 } 14 } else { 15 hot.mergeCells.mergedCellInfoCollection.push({"row": row, "col": col, "rowspan": rowspan, "colspan": colspan}); 16 }
3.初始化单元格或列的对齐方式
水平样式：htLeft,htCenter,htRight,htJustify
垂直样式：htTop,htMiddle,htBottom
4.只读模式
列只读，设置列属性：readOnly：true
单元格只读：cellProperties.readOnly = true
5.设置单元格的编辑类型
columns:[{type:类型}]
主要的类型有：
text：字符串
numeric：数字类型
date：日期框
checkbox：单选框
password:密码框
下面几种类型的使用比较特殊
select：下拉编辑器
columns:[
{editor:'select',
selectOption:[选项1，选项2，...]},
.......
]
dropdown：下拉选择
columns：[
{type:'dropdown',
source:[选项1，选项2，...]},
......
]
autocomplete：自动匹配模式
columns：[
{type:'autocomplete',
source:[选项1，选项2，...],
strict:true/false, //值为true，严格匹配
allowInvalid:true/false //值为true时，允许输入值作为匹配内容，只能在strict为true时使用
},
......
]
handsontable：表格模式
columns：[
{type:'handsontable',
handsontable:{...},
......
]
自定义模式
data=[{
title：html标签，
description:描述，
comments：评论，
cover：封面
},
......
]
自定义边界
customBorders:[
range:{
form:{row:行数，col：列数}, //起始行列
to:{row:行数，col：列数}, //终止行列
top/bottom/right/left:{ //上下右左边线
width:像数，
color:颜色
}
}
]
6.查询单元格的值
查询单元格的值需要3个步骤：
a.设置hot的属性search为true
b.创建比对函数
c.渲染比对结果
示例代码如下:
1 var 2 data = [ 3 ['Nissan', 2012, 'black', 'black'], 4 ['Nissan', 2013, 'blue', 'blue'], 5 ['Chrysler', 2014, 'yellow', 'black'], 6 ['Volvo', 2015, 'yellow', 'gray'] 7 ], 8 example = document.getElementById('example1'), 9 searchFiled = document.getElementById('search_field'), 10 hot; 11 12 hot = new Handsontable(example, { 13 data: data, 14 colHeaders: true, 15 search: true 16 }); 17 18 function onlyExactMatch(queryStr, value) { 19 return queryStr.toString() === value.toString(); 20 } 21 22 Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) { 23 var queryResult = hot.search.query(this.value); 24 25 console.log(queryResult); 26 hot.render(); 27 });
7.评论
comments：true/false //当值为true时可以显示评论，右键菜单可添加删除评论。
当值为true时，可设置单元格的评论内容，格式为：
cell：[
{
row:行数，
col：列数，
comment：评论内容
}
]
