如何 select handsontable 中的所有复选框
How to select all checkbox in handsontable
有谁知道如何通过选中特定行的第一个复选框来select(选中)handsontable 行中的所有复选框。我尝试了所有可能的选择来完成它,但我无论如何也做不到。
这是代码,
function getCarData() {
return [
{ available: true,available2: true,available3: true, comesInBlack: 'yes'},
{available: false,available2: true,available3: true,available3: true, comesInBlack: 'yes'},
{ available: true,available2: true,available3: true, comesInBlack: 'no'},
{available: false,available2: true,available3: true, comesInBlack: 'yes'},
{ available: false,available2: true,available3: true, comesInBlack: 'no'}
];
}
var example1 = document.getElementById('example1'),
hot1;
hot1 = new Handsontable(example1, {
data: getCarData(),
colHeaders: ['Available','Available2','Available3'],
columns: [
{
data: 'available',
type: 'checkbox'
},{
data: 'available2',
type: 'checkbox'
},{
data: 'available3',
type: 'checkbox'
}
]
});
这是 jsfiddle link
jsfiddle.net/mq5on8qf
您可以做的是添加一个 afterChange
事件来检查第一列是否有变化,如果是,则将该行的列值设置为新值。这是此类事件的实现:
afterChange: function (changes, source) {
var change = changes[0]; // [row, prop, oldVal, newVal]
var row = change[0];
var data = this.getData(); // reference to data object
var newVal = change[3];
var col = change[1];
// conditional on first row
if (col === 'available') {
data[row].available2 = newVal;
data[row].available3 = newVal;
}
this.render(); // render after making changes to data
}
并且 here is your fiddle 应用了它。
有谁知道如何通过选中特定行的第一个复选框来select(选中)handsontable 行中的所有复选框。我尝试了所有可能的选择来完成它,但我无论如何也做不到。
这是代码,
function getCarData() {
return [
{ available: true,available2: true,available3: true, comesInBlack: 'yes'},
{available: false,available2: true,available3: true,available3: true, comesInBlack: 'yes'},
{ available: true,available2: true,available3: true, comesInBlack: 'no'},
{available: false,available2: true,available3: true, comesInBlack: 'yes'},
{ available: false,available2: true,available3: true, comesInBlack: 'no'}
];
}
var example1 = document.getElementById('example1'),
hot1;
hot1 = new Handsontable(example1, {
data: getCarData(),
colHeaders: ['Available','Available2','Available3'],
columns: [
{
data: 'available',
type: 'checkbox'
},{
data: 'available2',
type: 'checkbox'
},{
data: 'available3',
type: 'checkbox'
}
]
});
这是 jsfiddle link jsfiddle.net/mq5on8qf
您可以做的是添加一个 afterChange
事件来检查第一列是否有变化,如果是,则将该行的列值设置为新值。这是此类事件的实现:
afterChange: function (changes, source) {
var change = changes[0]; // [row, prop, oldVal, newVal]
var row = change[0];
var data = this.getData(); // reference to data object
var newVal = change[3];
var col = change[1];
// conditional on first row
if (col === 'available') {
data[row].available2 = newVal;
data[row].available3 = newVal;
}
this.render(); // render after making changes to data
}
并且 here is your fiddle 应用了它。