閱讀目錄
handson: 親自實踐
先給出資料來源和基本配置：
var data =[["a1","b1","c1","d1"],
["a2","b2","c2","d2"],
["a3","b3","c3","d3"]
];var objectdata = [,,
,,,];
var container=document.getelementbyid('example');
var ht=new handsontable(container,);
開始操作**（一些方法methods）
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)
alert('getdataatcell: ' + ht.getdataatcell(1,3));// d2
// 若資料來源是objectdata，屬性名就是id，name，address等。
alert('getdataatrowprop: ' + ht.getdataatrowprop(1,'name'));// frank honest
alert('getdataatrow: '+ht.getdataatrow(2));//[3,"joan well",""]
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();
handsontable學習（2） 資料繫結
一 資料繫結 handsontable類似vue，資料來源和handsontable是動態繫結的，一旦handsontable的資料發生改變，name資料來源的資料也發生了相應的改變。所以，如果想讓handsontable的操作不改變源資料，可以使用資料副本 例 var data2 tesla ni...
Handsontable通用方法
1.clear 清空資料 2.createcol index,amount,createautomatically 新增列 index 列索引，amount 新增的列總數，createautomatically 為乙個數字 removecol index,amount 刪除列 createrow i...
handsontable 追加資料
之後決定選擇其他的框架來做 搜尋發現 handsontable 比較合適，追加資料時渲染速度很快，追加 500條資料用時在 200ms 之內。handsontable 的官網 handsontable 追加資料主要使用的方法是 getsourcedata 下面附上測試 testhandsontabl...