博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Handsontable对单元格的操作
阅读量:6256 次
发布时间:2019-06-22

本文共 2309 字,大约阅读时间需要 7 分钟。

原文地址: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

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

你可能感兴趣的文章
拼接问号分割的参数占位符
查看>>
CSS实现背景色渐变
查看>>
SQLite3 数据库指针传递
查看>>
如何把online OCR的结果转换成word文档
查看>>
常用的7大排序算法汇总
查看>>
centOS 6.5下升级mysql,从5.1升级到5.7
查看>>
推荐!国外程序员整理的 C++ 资源大全
查看>>
Linxu SSH免密登录-配置Hadoop时使用
查看>>
计算二叉树总结点/叶结点个数
查看>>
关于IE6下链接伪类(:hover)CSS背景图片闪动
查看>>
评: 为什么我不喜欢Go语言式的接口
查看>>
org.hibernate.hql.ast.QuerySyntaxException: User i
查看>>
RAC JDBC URL
查看>>
彻底理解Java中的基本数据类型转换(自动、强制、提升)
查看>>
【转】C/C++ URL编码,解码(提取自PHP)
查看>>
个性化推荐的十大挑战
查看>>
IE8_一行代码测试IE7~IE6
查看>>
sizeof 和strlen的区别
查看>>
第十章 Scala 容器(三):使用可变与不可变容器特有方法
查看>>
XCode 7上传遇到ERROR ITMS-90535 Unexpected
查看>>