Handsontable对单元格的操作

1.自动填充单元格数据

fillHandle：true/false //当值为true时，允许拖动单元格右下角，将其值自动填充到选中的单元格

2.合并单元格

mergeCells：[{row:起始行数,cols:起始列数,rowspan:合并的行数,colspan:合并的列数},…]

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.渲染比对结果

示例代码如下：

var  
   data = [  
     ['Nissan', 2012, 'black', 'black'],  
     ['Nissan', 2013, 'blue', 'blue'],  
     ['Chrysler', 2014, 'yellow', 'black'],  
     ['Volvo', 2015, 'yellow', 'gray']  
   ],  
   example = document.getElementById('example1'),  
   searchFiled = document.getElementById('search_field'),  
   hot;  

 hot = new Handsontable(example, {  
   data: data,  
   colHeaders: true,  
   search: true  
 });  

 function onlyExactMatch(queryStr, value) {  
   return queryStr.toString() === value.toString();  
 }  

 Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) {  
   var queryResult = hot.search.query(this.value);  

   console.log(queryResult);  
   hot.render();  
 });  

7.评论

comments：true/false //当值为true时可以显示评论，右键菜单可添加删除评论。

当值为true时，可设置单元格的评论内容，格式为：

cell：[

     {

         row:行数，

         col：列数，

         comment：评论内容

     }

]