<div id="example" class="hot handsontable htColumnHeaders"></div>
1、数据源为数组
var hot,
data = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
['2012', 10, 11, 12, 13, 15,'','more'],//比第一行多一个元素
['2013', 10, 11, 12, 13, 15, 16],
['2014', 10, 11, 12, 13, 15, 16],
[ 11, '2015', 12, 13, 15, 16],
['2016', 10, 11, 12, 13, 15, 16]
],
container = document.getElementById('example');
hot = new Handsontable(container, {
data: data,
startRows: 5,
startCols: 5,
colHeaders: true,
});
由第一行的元素个数决定表有列数，后面的一次填充，多的不会填充，如第二行的'more'
2、数据源为数组，可以隐藏列
var hot,
hiddenData = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
['2012', 10, 11, 12, 13, 15, 16],
['2013', 10, 11, 12, 13, 15, 16],
['2014', 10, 11, 12, 13, 15, 16],
['2015', 10, 11, 12, 13, 15, 16],
['2016', 10, 11, 12, 13, 15, 16]
],
container = document.getElementById('example');
hot = new Handsontable(container, {
data: hiddenData,
colHeaders: true,
minSpareRows: 1,
columns: [
{data: 0},
{data: 2},
{data: 3},
{data: 4},
{data: 5},
{data: 6}
]
});
console.log('getData', hot.getData());
console.log('getSourceData', hot.getSourceData());
下过如图：
但是调用getData()发现里面没有hiddenData 中'Kia'这一列的数据，说明getData()其实只获取能看见的数据，要通过getSourceData()才能看见所有的数据
3、数据源是对象数组 ，没有columns ,
var hot,
objectData = [
{id: 1, address: '86', name: 'Ted Right',a:'nu'},
{id: 2, name: 'Frank Honest',a:'nu', address: ''},
{id: 3, name: 'Joan Well', address: ''},
{id: 4, name: 'Gail Polite', address: ''},
{id: 5, name: 'Michael Fair', address: ''},
],
container = document.getElementById('example');
hot = new Handsontable(container, {
data: objectData,
colHeaders: ['第一列','第二列','第三列','第四列'],
});
根据第一行的内容属性填充数据 后面的向第一行看齐，
如图，第一行有4个属性那么表就有4列，第一列是id,第2列是address,第3列是name,第4列是a,第一行数据依次填充；第二行数据填充时找到数据源中的第二个对象，第一个属性是id,与第一行对应就填充，第二个属性和第一行不对应就自动填充为空，这时继续将第二行的第二个属性和第一行的第三个属性对比（而不是那第二行的第三个属性和第一行的第三个属性对比），发现一致就填充。以此类推。。。
确定有几列后表头一次填充，若colHeaders里面的值不够后面以大写英文字母填充。例如上面的colHeaders为['第一列','第二列','第三列'],那么第四列的表头为'D'。
4、数据源是对象数组，columns是function
var hot,
nestedObjects = [
{id: 1, name: {first: "Ted", last: "Right"}, address: ""},
{id: 2, address: ""}, // HOT will create missing properties on demand
{id: 3, name: {first: "Joan", last: "Well"}, address: ""}
],
container = document.getElementById('example');
hot = new Handsontable(container, {
data: nestedObjects,
colHeaders: true,
columns: function(column) {
var columnMeta = {};
if (column === 0) {
columnMeta.data = 'name.first';
} else if (column === 1) {
columnMeta.data = 'id';
} else if (column === 2) {
columnMeta.data = 'https://docs.handsontable.com/pro/1.10.2/name.last';
} else if (column === 3) {
columnMeta.data = 'address';
} else {
columnMeta = null;
}
return columnMeta;
},
});
5、数据源是对象数组，和columns映射（甚至是嵌套的）
var hot,
objectData = [
{id: 1, address: '86',a:'nu',name: {first: 'Ted Right', last:''}},
{id: 2, a:'nu', name: {first:'Frank Honest', last:''},address: '2'},
{id: 3, name: 'Joan Well'},
{id: 4, name: 'Gail Polite', address: '4'},
{id: 5, name: 'Michael Fair', address: '5'},
],
container = document.getElementById('example');
hot = new Handsontable(container, {
data: objectData,
colHeaders: ['第一列','第二列','第三列','第四列','第五列'],
columns: [
{data:'name.first'},
{data:'id'},
{data: 'address'},
],
});
列的内容根据columns对列的定义来填充数据，columns中的 data对应的值对应数据源中对象中的属性。数据源中一个对象为一行数据，对象中的属性的位置和columns中的列位置不同没关系，对象中对应的列的属性没有就为空。
官方文档上还有schema相关的，用的不多就没详看😀
