Handsontable数据源

<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相关的，用的不多就没详看😀