Question

我试图找出如何从一行中选择数据（单元格值）。这些文档看起来并不清楚，添加钩子的例子似乎有点压倒性。

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

这就是我尝试过的。

＆＃13;

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');

＆＃13;

<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>

＆＃13;

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>

获取所选行的单元格值

1 个答案: