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

示例代码如下:

[javascript] view plaincopyprint?

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

}

]

时间: 2024-10-06 12:28:04

Handsontable对单元格的操作的相关文章

C#实现对EXCEL指定单元格进行操作

using System; using System.Collections.Generic; using System.Text; //先添加引用 using Microsoft.Office.Interop.Excel; using System.IO; using System.Reflection;   namespace SighExcel {     public class Sign     {         /// <summary>         /// 对Excel指定

handsontable的单元格操作方法

1.为handsontable添加钩子方法 addHook(key,callback):key为钩子方法名 [javascript] view plaincopyprint? <span style="font-size:18px;">例如:hot.addHook(‘beforeInit‘, myCallback);</span> addHookOnce(key,callback):添加只使用一次的方法,用完后自动删除 [javascript] view pla

delphi通过OLE对word进行单元格合并操作

uses comobj, word2000procedure TForm1.Button2Click(Sender: TObject);var WordApp, WordDoc,table: OleVariant; fileName : string;begin WordApp := CreateOleObject('Word.Application'); WordDoc := WordApp.Documents.Add; try WordDoc.PageSetup.LeftMargin :=

handsontable 给单元格自定义属性

1 setHotAttr(hotObj,rowHeader,colHeader){// 给handsongtable绑定行列属性 2 console.log(hotObj); 3 console.log(colHeader); 4 console.log(rowHeader); 5 6 let count_col = Number(hotObj.countCols());//获取列数 7 let count_row = Number(hotObj.countRows());//获取行数 8 9

jqGrid单元格编辑详解

单元格编辑 单元格编辑提供给用户修改一行中的单个单元格内容的功能,开发者可以通过ajax或者单元格编辑事件对修改的数据进行处理. 通过下面的行为,单元格编辑支持键盘导航和执行单元格编辑操作 点击一个不可编辑的单元格会选中它,然后可以通过上下左右键移动到其他单元格 当移动到一个可编辑的单元格,可以按下Enter键将单元格切换到编辑模式.当再次按下Enter键,或者tab,点击其他单元格将会执行保存操作.按下Esc键取消编辑并且恢复为之前的值.当编辑一个单元格时,光标键始终在此单元格内. 点击可编辑

JS实现填报时对修改过的单元格进行标识

1. 描述 在填报预览时,对单元格编辑后,其左上角有个红色标记,但非常不明显,用户很难注意到.有没有什么好的办法,对单元格操作后,将其做较明显的特殊标记处理,方便用户识别呢? 如图所示:对单元格进行操作后,将其单元格进行背景色着色.文本加粗等标记. 2. 实现方法 打开模板 %FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt 2.1 方法1:编辑结束后修改单元格样式 控件编辑后事件中修改单元格样式,选中需要设

MFC List Control控件添加单元格编辑和单元格下拉列表项以适用于数据库相关操作

作为现代的软件,往往是连着数据库的,而连着和用户方便地操作之间,还有着界面这道坎.MFC是Windows上比较好开发用户界面的框架,然而其自带的控件中没有对于数据库表格支持较好的控件,而使用网上提到的 DataGrid 等控件在本人的win8.1+VS2013平台上老出现找不到控件或者头文件的问题,搞的烦死人.最后想到 List Control 控件只要稍作修改,加上单元格编辑和单元格下拉列表,其实就能和数据库进行良好的对接,一百度,果然有人已经做了这件事,实在是太让人感动了!       

基于.NET的Excel开发:单元格区域的操作(读取、赋值、边框和格式)

引用 using Excel = Microsoft.Office.Interop.Excel; 定义 1 Excel.ApplicationClass app; 2 Excel.Workbooks books; 3 Excel.Workbook book; 4 Excel.Sheets sheets; 5 Excel.Worksheet sheet; 6 Excel.Range m_objRange; 7 object missing = System.Reflection.Missing.V

C#操作Excel的技巧与方法 设置单元格等

C#操作Excel可以分为客户端和插件版本,区别就是是否需要Excel环境,功能实现一样 一.通用操作与处理(有点乱有时间再整理) 1:工程对excel类库的导入,如: c:\program files\Microsoft office\offiece11\excel.exe 2:命名控件的引入: using Microsoft.office.Interop.Excel; 3:如果是对一个已经存在的excel文件进行操作则: Application app=new Application();