如何在Handsontable中点击按钮后用复选框存储对应行值

Here's how you can implement the functionality to gather all cell values from rows where the checkbox is checked when a button is clicked:

Step 1: Add a Trigger Button #

First, add a button to your HTML to initiate the data collection process:

<button id="getCheckedRows">Collect Checked Rows</button>
<div id="inputTable"></div>

Step 2: Update Your JavaScript Code #

Modify your existing Handsontable setup to include a click event handler for the button. This handler will loop through each row, check for checked checkboxes, and collect the corresponding row data:

var container = document.getElementById('inputTable');
var hot = new Handsontable(container, {
  data: data, // Your existing array of objects
  rowHeaders: true,
  colHeaders: true,
  columns: [
    {data:'well_id'},
    {data:'layer_id'},
    {data:'date'},
    {data:'oil'},
    {data:'water'},
    {data:'gas'},
    {type:'checkbox'}
  ],
  editor: false
});

// Add click handler for the collection button
document.getElementById('getCheckedRows').addEventListener('click', function() {
  const checkedRowData = [];
  const checkboxColumnIndex = hot.countCols() - 1; // Target the last column (checkbox)

  // Iterate through every row in the table
  for (let rowIndex = 0; rowIndex < hot.countRows(); rowIndex++) {
    // Check if the checkbox in this row is selected
    const isChecked = hot.getDataAtCell(rowIndex, checkboxColumnIndex);
    
    if (isChecked) {
      // Get all cell values for the row (includes checkbox state)
      const fullRowData = hot.getDataAtRow(rowIndex);
      
      // Optional: Remove the checkbox value from the array if needed
      // const rowDataWithoutCheckbox = fullRowData.slice(0, -1);
      
      checkedRowData.push(fullRowData);
    }
  }

  // The checkedRowData array now holds all rows with checked checkboxes
  console.log('Collected checked rows:', checkedRowData);
  
  // Use this array as needed (store in a variable, send to a server, etc.)
});

Key Details: #

• Checkbox State Check: hot.getDataAtCell(rowIndex, checkboxColumnIndex) returns a boolean (true if checked, false otherwise) for the checkbox in each row.
• Row Data Retrieval: hot.getDataAtRow(rowIndex) fetches an array of all cell values in the specified row.
• Dynamic Column Target: Using hot.countCols() -1 ensures we always target the last column (your checkbox) even if you add/remove columns later, instead of hardcoding an index.
• Optional Cleanup: If you don't want the checkbox value in your final array, use slice(0, -1) to exclude the last element of the row data array.

This approach reliably collects all rows where the user has checked the checkbox, storing their values in an array ready for your next use case.

内容的提问来源于stack exchange，提问作者Utkarsh Sharma