【问题标题】:How to select all checkbox in handsontable如何选择handsontable中的所有复选框
【发布时间】:2016-02-02 03:58:36
【问题描述】:

有谁知道如何通过选中特定行的第一个复选框来选择(选中)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 链接 jsfiddle.net/mq5on8qf

【问题讨论】:

  • 你的小提琴似乎不完整......在 div 中没有什么可以检查的。你能完成html,然后我们可以帮助你
  • 链接非 SSL 小提琴以防止安全错误:jsfiddle.net/mq5on8qf
  • @Simon Price,正如 myf 建议的那样,我已经更改了链接,您现在可以检查一下吗?
  • 因此,如果您单击单元格 0,0 处的复选框,您是否希望该行上的所有列也被选中/取消选中?
  • @ZekeDroid,是的,非常好。这就是我想要的

标签: javascript handsontable


【解决方案1】:

您可以添加一个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 应用它。

【讨论】:

  • 感谢您的解决方案 :)
猜你喜欢
  • 2019-04-17
  • 2017-07-27
  • 2017-06-12
  • 1970-01-01
  • 1970-01-01
  • 2011-10-09
  • 2016-05-13
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多