获取选定行的单元格值答案

【问题标题】：Getting the cell values for a selected row获取选定行的单元格值
【发布时间】：2018-03-10 14:13:27
【问题描述】：

我正在尝试研究如何从一行中选择数据（单元格值）。文档似乎不是那么清楚，添加钩子的示例似乎有些压倒性。

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>

【问题讨论】：

标签： javascript handsontable

【解决方案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>

【讨论】：

啊，谢谢！ getCell 是否应该在每次选择一行时触发？
@user1513388 不，这不是一个事件挂钩，文档中实际上有很多它们，您将以相同的方式使用它们。我在示例中写的那个是当你调用getCell 时任意调用来获取一行；我想这就是你要找的东西。
几乎是我需要的。本质上，我尝试在选择行时抓取行数据，以便将其传递给 HighCharts 图表。
@user1513388 我刚刚用事件而不是自定义挂钩更新了示例。这应该是您正在寻找的内容，您可以将其用于所有其他事件。
几乎完全符合我的需要。如何获取行中的所有单元格而不仅仅是行中的第一个单元格？