Handsontable 學習筆記-Methods

閱讀目錄javascript

Handson: 親自實踐html

先給出數據源和基本配置：java

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();