如何使用复选框来选中或取消选中所有框到handsontable

Question

我想使用一个复选框来选中或取消选中所有框到可用的 col。我创建了一个带有 doalert 功能的复选框来控制选中的操作。我正在使用 setDataAtCell 编辑检查单元格，但它不起作用。

我的代码是：

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2012, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2013, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2014, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2015, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2016, available: false, comesInBlack: 'no'}
    ];
  }
  
  var example1 = document.getElementById('example1'),
    hot1;
  
  hot1 = new Handsontable(example1, {
    data: getCarData(),
    colHeaders: ['Car model', 'Year of manufacture', 'Available'],
    columns: [
      {
        data: 'car'
      },
      {
        data: 'year',
        type: 'numeric'
      },
      {
        data: 'available',
        type: 'checkbox'
      }
    ]
  });

function doalert(checkboxElem) {
  if (checkboxElem.checked) {
 	var rows = hot1.countRows();
  for(var i = 0; i < rows; i++){
  	hot1.setDataAtCell(i, 2, true)
  }
 }
  else {
     	var rows = hot1.countRows();
  for(var i = 0; i < rows; i++){
  	hot1.setDataAtCell(i, 2, false)
  }
}
}
});

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>
button {
  padding: 10px;
  margin: 10px 0;
}

<div id="example1" class="hot handsontable htColumnHeaders"></div>
   CheckAll/UncheckAll<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this)"/>

请帮忙。

Answer 1

你可以这样做：

const example1 = document.getElementById('example1');
const hot1 = new Handsontable(example1, {
  data: getCarData(),
  colHeaders: ['Car model', 'Year of manufacture', 'Available'],
  columns: [{data: 'car'},{data: 'year',type: 'numeric'},{data: 'available',type: 'checkbox'}]
});

function getCarData() {
  return [{car: 'Mercedes A 160',year: 2012,available: true,comesInBlack: 'yes'},{car: 'Citroen C4 Coupe',year: 2013,available: false,comesInBlack: 'yes'},{car: 'Audi A4 Avant',year: 2014,available: true,comesInBlack: 'no'},{car: 'Opel Astra',year: 2015,available: false,comesInBlack: 'yes'},{car: 'BMW 320i Coupe',year: 2016,available: false,comesInBlack: 'no'}];
}

function doalert(checkboxElem) {
  example1
    .querySelectorAll('input[type=checkbox]')
    .forEach(elem => elem.checked = checkboxElem.checked);
}

</style><!-- Ugly Hack due to jsFiddle issue --><script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script><link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>button {
  padding: 10px;
  margin: 10px 0;
}

<div id="example1" class="hot handsontable htColumnHeaders"></div>

<label for="g01-01">CheckAll/UncheckAll</label>
<input type="checkbox" name="checkfield" id="g01-01" onchange="doalert(this)" />

Answer 2

我使用你的不同方式来获得触发更改功能。

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2012, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2013, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2014, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2015, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2016, available: false, comesInBlack: 'no'}
    ];
  }
  
  var example1 = document.getElementById('example1'),

  hot1 = new Handsontable(example1, {
    data: getCarData(),
    colHeaders: ['Car model', 'Year of manufacture', 'Available'],
    columns: [
      {
        data: 'car'
      },
      {
        data: 'year',
        type: 'numeric'
      },
      {
        data: 'available',
        type: 'checkbox'
      }
    ]
  });

$('input[name=checkfield]').click(function(){
//function doalert(checkboxElem) {
  if ($(this).is(':checked')) {
 	    var rows = hot1.countRows();
      for(var i = 0; i < rows; i++){
  	    hot1.setDataAtCell(i, 2, true)
      }
 }
  else {
     	  var rows = hot1.countRows();
         for(var i = 0; i < rows; i++){
  	      hot1.setDataAtCell(i, 2, false)
       }
  }

})

 
});

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/pro/1.7.4/bower_components/handsontable-pro/dist/handsontable.full.min.css"><style>
button {
  padding: 10px;
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example1" class="hot handsontable htColumnHeaders"></div>
   CheckAll/UncheckAll<input type="checkbox" name="checkfield" id="g01-01"/>