Handsontable对单元格的操作

时间:2022-09-14 19:55:42

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

示例代码如下:

  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. hot = new Handsontable(example, {
  12. data: data,
  13. colHeaders: true,
  14. search: true
  15. });
  16. function onlyExactMatch(queryStr, value) {
  17. return queryStr.toString() === value.toString();
  18. }
  19. Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) {
  20. var queryResult = hot.search.query(this.value);
  21. console.log(queryResult);
  22. hot.render();
  23. });

7.评论

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

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

cell:[

{

row:行数,

col:列数,

comment:评论内容

}

]