获取选定行的单元格值

Question

我正在研究如何 select 一行中的数据（单元格值）。文档似乎没有那么清楚，添加钩子的例子似乎有点让人不知所措。

https://docs.handsontable.com/0.34.4/Hooks.html

这是我试过的。

var data = [
        ["", "Ford", "Volvo", "Toyota", "Honda"],
        ["2014", 10, 11, 12, 13],
        ["2015", 20, 11, 14, 13],
        ["2016", 30, 15, 12, 13]
    ];

    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
        data: data,
        minSpareRows: 1,
        rowHeaders: true,
        colHeaders: true,
        contextMenu: true
    });
    
    //This is where I think I should add something like this but this is where I'm lost.
    
    hot.addHook('getCell');

<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet"/>
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="./node_modules/handsontable/dist/handsontable.full.js"></script>
    <script src="bundle.js"></script>
    <link rel="stylesheet" media="screen" href="./node_modules/handsontable/dist/handsontable.full.css">


</head>
<body>

<div id="example"></div>
</body>



</html>

Answer 1

我想这就是您要找的。从阅读文档看起来你需要给钩子一个回调。由于您希望在单击单元格时获取行，因此您要注册的事件是 afterSelection。选择一个或多个单元格后（例如在鼠标移动期间）会触发此回调，此时您可以访问回调的参数。然后你可以只使用 Handsontable 核心 api 来拉取 cell/row/col/etc 数据

var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2014", 10, 11, 12, 13],
  ["2015", 20, 11, 14, 13],
  ["2016", 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
});


// create a hook with an event from Handstable core events 
hot.addHook('afterSelection', function(row,column){
  const selectedCell = hot.getDataAtCell(row,column); 
  const selectedCol = hot.getDataAtCol(column);
  const selectedRow = hot.getDataAtRow(row);
  
  console.log(`selected cell [${row}][${column}] with value [${selectedCell}]`)
  console.log(`column values: ${JSON.stringify(selectedCol)}`);
  console.log(`row values: ${JSON.stringify(selectedRow)}`)
});

<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet" />
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="./node_modules/handsontable/dist/handsontable.full.js"></script>
  <script src="bundle.js"></script>
  <link rel="stylesheet" media="screen" href="./node_modules/handsontable/dist/handsontable.full.css">


</head>

<body>

  <div id="example"></div>
</body>



</html>

获取选定行的单元格值

Getting the cell values for a selected row

javascript

handsontable