获取选定行的单元格值
[英]Getting the cell values for a selected row
问题描述
I'm trying to work out how to select the data (cell values) from a row. 
我正在尝试找出如何从一行中选择数据（单元格值）。 The docs don't seem to be that clear and the examples for adding hooks seems to be somewhat overwhelming. 文档似乎不太清楚，添加钩子的示例似乎有些让人不知所措。
https://docs.handsontable.com/0.34.4/Hooks.html https://docs.handsontable.com/0.34.4/Hooks.html
This what I've tried. 这是我尝试过的。
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>
1 个解决方案
解决方案1
2 已采纳 2017-09-28 19:09:08
I think this is what you're looking for. 我认为这就是您要寻找的。 From reading the docs looks like you need to give the hook a callback. 通过阅读文档，您似乎需要给钩子提供回调。 Since you want to get the row when a cell is clicked the event you want to register is afterSelection . 由于要在单击单元格时获得该行，因此要注册的事件是afterSelection 。 This callback is fired after one or more cells are selected (eg during mouse move), when that happens you get access to the parameters of the callback. 在选择一个或多个单元格后（例如在鼠标移动期间），将触发此回调，当发生这种情况时，您可以访问该回调的参数。 Then you can just use the Handsontable core api to pull the cell / row / col /etc data 然后，您可以使用Handsontable核心api提取单元格 / 行 / 列 /等数据
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.