如何在handontable中向列的所有单元格添加按钮?

时间:2015-12-28 05:05:11

标签: javascript handsontable

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

JS小提琴链接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'}
    ]
  });

});

2 个答案:

答案 0 :(得分:0)

我就这样做了......

  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>";
 }

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

答案 1 :(得分:0)

description

如果您使用onclick替换&#39; alert()&#39;在我的第一个例子中用&#39; btnOnClick(this)&#39;

然后在代码中

String