标签:
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)
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();
标签:
原文地址:http://www.cnblogs.com/ibgo/p/4770703.html