如何在handsontable中为一列的所有单元格添加一个按钮？答案

【问题标题】：How to add a button to all the cells of a column in handsontable?如何在handsontable中为一列的所有单元格添加一个按钮？
【发布时间】：2016-04-01 23:21:01
【问题描述】：

我想添加一个按钮或链接到列的单元格以进行删除操作。生成的 JSON 数据是动态的，行数可以随时更改。如何在删除列的所有单元格中添加删除按钮？

JS Fiddle 链接http://jsfiddle.net/L85sppz6/

$(document).ready(function () {

  var container = document.getElementById('finance_example');
    var data = function () {
    return Handsontable.helper.createSpreadsheetData(100, 12);
  };

  var financeData = [
    ["239.65","24/02/2015","0.000128","-0.2379","47.044"],
    ["238.99","24/02/2015","0.0106","-0.2435","5.11"],
    ["231.26","24/02/2015","0.0066","-0.2521","7.571"],
    ["239.12","24/02/2015","0.0082","-0.2454","16.429"],
    ["255.07","24/02/2015","0.0091","-0.2017","252"],
    ["238.91","24/02/2015","0.0077","-0.2437","995"],
    ["211.51","24/02/2015","0.0089","-0.1880","4.28"],
    ["210.65","24/02/2015","0.0078","-0.1930","2.521"],
    ["205.06","24/02/2015","0.0107","-0.2251","96"],
    ["212.41","24/02/2015","0.0085","-0.1949","456"],
    ["227.94","24/02/2015","0.0158","-0.1363","49"],
    ["211.28","24/02/2015","0.0078","-0.1765","19"],
    ["1486.97","24/02/2015","0.0112","-0.2310","168"],
    ["1310.00","24/02/2015","-0.01812","-0.3310","0"],
    ["1497.50","24/02/2015","0.0051","-0.2309","160"]
  ];

  var hot = new Handsontable(container, {
    data: financeData,
    height: 396,
    colHeaders: ["Price", "Date", "1D Chg", "YTD Chg", "Vol BTC",'Delete'],
    rowHeaders: true,
    stretchH: 'all',
    sortIndicator: true,
    columnSorting: true,
    contextMenu: true,
    columns: [
      {type: 'numeric', format: '$0,0.00'},
      {type: 'date', dateFormat: 'DD/MM/YYYY', correctFormat: true},
      {type: 'numeric', format: '0.00%'},
      {type: 'numeric', format: '0.00%'},
      {type: 'numeric', format: '0.00'},
      {type: 'numeric', format: '0.00'}
    ]
  });

});

【问题讨论】：

标签： javascript handsontable

【解决方案1】：

我就是这样做的……

  var hot = new Handsontable(container, {
  data: financeData,
height: 396,
colHeaders: ["Price", "Date", "1D Chg", "YTD Chg", "Vol BTC",'Delete'],
rowHeaders: true,
stretchH: 'all',
sortIndicator: true,
columnSorting: true,
contextMenu: true,
columns: [
  {type: 'numeric', format: '$0,0.00'},
  {type: 'date', dateFormat: 'DD/MM/YYYY', correctFormat: true},
  {type: 'numeric', format: '0.00%'},
  {type: 'numeric', format: '0.00%'},
  {type: 'numeric', format: '0.00'},
  {data:'Delete', renderer:renderButtons}
]
 });
    function renderButtons(instance, td, row, col, prop, value, cellProperties) {
  td.innerHTML = "<button onclick='alert()' type='button'>press</button>";
 }

我认为您在列数组中有一对多行，所以我将最后一行转换为显示。我只使用 onclick='alert()' 来表明它有效。实际上，我会做类似 $('#tblname button').click(function(obg){ // 但这里的事件处理代码 });

【讨论】：

感谢您的解决方案 :)。我也是这么想的。顺便说一句，您知道如何获取我单击的按钮的行号吗？

【解决方案2】：

DataTables.net, which I use, I have to do something similar.  So  after the table is redndered, in javascript using jquery...

$("#tblName button).click(function(evtObj) {
     var row = $(evtObj).closest("tr");
     // process row.
});

如果您使用 onclick 将我的第一个示例中的“alert()”替换为“btnOnClick(this)”

然后在代码中

function btnOnClick(btn) {
    // first parentNode is td, second is tr
    var row = btn.parentNode.parentNode;
    // process row.
}

【讨论】：