作者：骆锐锋1_665 | 来源：互联网 | 2023-05-17 18:07
数据绑定：1、表格中得数据是引用了数据源中的数据：表格中数据改变，数据源中得数据也改变；数据源中得数据改变，通过render方法，表格中的数据也改变；2、如果想把数据源中的数据和表格中的数据分
数据绑定：
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){
//...
}
京公网安备 11010802041100号