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

Posted 2023-03-22

【中文标题】如何使用复选框来选中或取消选中所有框到handsontable

【英文标题】：How to use checkbox to checkall or uncheck all boxes into handsontable

【发布时间】：2019-04-17 03:57:22

【问题描述】：

我想使用一个复选框来选中或取消选中所有框到可用的 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)"/>

请帮忙。

【问题讨论】：

嗨，您是否尝试过答案中的任何建议？他们中的任何一个有帮助吗？如果是这样，请考虑接受对您有帮助（最大）的那个

【参考方案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)" />

【参考方案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"/>