handsontable-developer guide-data binding,data sources

数据绑定：

1、表格中得数据是引用了数据源中的数据：表格中数据改变，数据源中得数据也改变；数据源中得数据改变，通过render方法，表格中的数据也改变；

2、如果想把数据源中的数据和表格中的数据分开：JSON.parse(JSON.stringify(data2))

3、保存之前clone表格，使用afterChange的var tmpData = JSON.parse(JSON.stringify(data3));语句。

afterChange:cell改变之后，会触发function(changes, source){}
changes:是二维数组，每一被编辑的单元格信息有：[row, prop, oldVal, newVal]
source:alter", "empty", "edit", "populateFromArray", "loadData", "autofill", "paste"

 

数据源：

1、数组

data = [
  ['', '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]
];

2、隐藏第二列

columns: [
  {data: 0},
  {data: 2},
  {data: 3},
  {data: 4},
  {data: 5},
  {data: 6}
]

3、对象数组

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: ''},
]；

4、对象数组嵌套列映射

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: ""}
];
columns: [
  {data: 'id'},
  {data: 'name.first'},
  {data: 'name.last'},
  {data: 'address'}
];

5、对象数组自定义数据约定：数据源为空

hot5 = new Handsontable(container, {
  data: [],
  dataSchema: {id: null, name: {first: null, last: null}, address: null},
  startRows: 5,
  startCols: 4,
  colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
  columns: [
    {data: 'id'},
    {data: 'name.first'},
    {data: 'name.last'},
    {data: 'address'}
  ],
  minSpareRows: 1
});

6、数据源为函数:http://docs.handsontable.com/0.16.0/tutorial-data-sources.html  最后一个

 var
  container6 = document.getElementById('example6'),
  hot6;

hot6 = new Handsontable(container6, {
  data: [
    model({id: 1, name: 'Ted Right', address: ''}),
    model({id: 2, name: 'Frank Honest', address: ''}),
    model({id: 3, name: 'Joan Well', address: ''}),
    model({id: 4, name: 'Gail Polite', address: ''}),
    model({id: 5, name: 'Michael Fair', address: ''})
  ],
  dataSchema: model,
  colHeaders: ['ID', 'Name', 'Address'],
  columns: [
    {data: property('id')},
    {data: property('name')},
    {data: property('address')}
  ],
  minSpareRows: 1
});

function model(opt){
   //...
}