Handsontable 学习笔记-Methods

时间：2021-12-04 19:50:35

Handson: 亲自实践

先给出数据源和基本配置：

 var data =[

       ["A1","B1","C1","D1"],

       ["A2","B2","C2","D2"],

       ["A3","B3","C3","D3"]

     ];

     var objectData = [

       {id: 1, name: 'Ted Right', address: ''},

       {id: 2, name: 'Frank Honest', address: ''},

       {id: 3, name: 'Joan Well', address: ''},

       {id: 4, name: 'Gail Polite', address: ''},

       {id: 5, name: 'Michael Fair', address: ''},

     ];

     var container=document.getElementById('example');

     var ht=new Handsontable(container,{

       data:objectData,

       rowHeaders:true,

       colHeaders:true

       //,disableVisualSelection: true

     });

开始操作表格（一些方法methods）

怎样获得表格中某个范围range的数据？

alert(ht.getData(0,1));//[A1,B1]

alert(ht.getData(0,2));//[A1,B1,C1]

alert(ht.getData(0,3));//[A1,B1,C1,D1]

alert(ht.getData(0,4));//[A1,B1,C1,D1,] 

alert(ht.getData(1,1));//[A1,B1,A2,B2]

alert(ht.getData(1,2));//[A1,B1,C1,A2,B2,C2]

alert(ht.getData(1,3));//[A1,B1,C1,D1,A2,B2,C2,D2]

alert(ht.getData(2,1));//[A1,B1,A2,B2,A3,B3]

alert(ht.getData(1,1,2,2));//[B2,C2,B3,C3] 这是一个起止区间，类似excel的B2：C3;没有开始地址的就默认为(0,0),如(0,1)==(0,0,0,1),(2,1)==(0,0,2,1)

怎样获得表格中某个单元格cell的数据？

alert('getDataAtCell: ' + ht.getDataAtCell(1,3));// D2

// 若数据源是objectData，属性名就是id，name，address等。
alert('getDataAtRowProp: ' + ht.getDataAtRowProp(1,'name'));// Frank Honest

怎样获得表格中某一行row的数据？

alert('getDataAtRow: '+ht.getDataAtRow(2));//[3,"Joan Well",""]

怎样获得表格中某一列column的数据？

 alert('getDataAtCol: '+ht.getDataAtCol(1));

 // 类似于getDataAtCol()，只不过将列索引改成了字段属性名。对object datasource有效。

 alert('getDataAtProp: '+ht.getDataAtProp("name"));

怎样改变单个或多个单元格的内容？

  ht.setDataAtCell([

      [0,0,'hi:  0,0'],

      [0,2, "hi: 0,2"]

  ]);

  //  根据行号列标（Array data source）或行号列属性（object datasource）设置单元格的值。

  ht.setDataAtRowProp(1,'name',"wooHAHA");

怎样在表格中插入行和列？

ht.alter('insert_row',2);// 在第3行上插入一行，不带行索引表示加入到当前行下方;

// 插入列同理!但是只能用在Array datasource！

ht.alter('insert_col',2);//在第3列前面（左边）插入一列。

怎样在表格中删除行和列？

ht.alter('remove_row');

ht.alter('remove_col');

怎样操作单元格？

alert(ht.getCell(1,1));//获得单元格对象

ht.getCellMeta(1,1));//获得单元格的属性对象

ht.setCellMeta(1,1,"sx","sxz");//设置单元格属性

// 上面说了如何设置和获得cell或range的值，下面看看如果选择它们。

// 获得和选择是一样的吗？不一样的概念，get、select

console.log(ht.selectCell(2,2));//预设第三行第三列被选中

alert(ht.getValue());//现在知道getValue怎么回事了吧！当预设有cell被选中时，这个getValue就会显示选中cell的内容了。

// 好吧，来看看预设选中了什么？

alert(ht.getSelected());//返回坐标，如2,2,2,2

怎么知道表格的行数和列数？

alert('表格行数：'+ht.countRows());

alert('表格列数：'+ht.countCols());

怎么根据列名称得到列索引，根据列索引得到列名称？

alert(ht.propToCol('id'));//根据列属性名获得列索引,要object datasource才行。但是插入列却要用array datasource，这么纠结？

alert(ht.colToProp(2));//根据列索引得到该列的属性名称，如name，address等。数据源是object才有效。

怎样获得行标题和列标题的名称？

 // 表格配置中有个rowHeaders,一般配置为true，显示为行号1,2,3,4...。这个也可以自定义的哦，比如 rowHeaders:['第一行','第二行'...],这样getRowHeader函数就有意义了。

alert(ht.getRowHeader(1));

console.log(ht.getColHeader());//不带参数返回所有列名称的array 如["A","B","C"]。

怎么清空表格内容？

ht.clear();

相关文章