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：评论内容

         }

]

转载于:https://www.cnblogs.com/yuwenjing0727/p/8340560.html