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){
   //...
}

巴特西

handsontable-developer guide-data binding,data sources

最新文章

热门文章