如何选择Handsontable中的所有复选框

debugcn 发表于 Dev

尼基尔·巴拉德瓦（Nikhil Bharadwaj）

有谁知道如何通过选中特定行的第一个复选框来选择（选中）动手行中的所有复选框。我尝试了所有可能的选项来完成它，但是我无法以任何方式完成它。

这是代码，

  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链接jsfiddle.net/mq5on8qf

ZekeDroid

您可以做的是添加一个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
}

而这里是你的小提琴与应用它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。