如何在handsontable的单元格内添加自定义按钮？

Posted 2023-03-22

【中文标题】如何在handsontable的单元格内添加自定义按钮？

【英文标题】：How do I add a custom Button inside a cell in handsontable?

【发布时间】：2014-09-06 15:05:44

【问题描述】：

我正在尝试在 handsontable 的每一行末尾添加一个自定义保存按钮。 我在 laravel 4 中使用 handsontable 包。

按钮显示如下：

<button>Save</button>

【问题讨论】：

您使用的是什么代码？你试过什么？

【参考方案1】：

尝试使用htmlRenderer

演示：http://docs.handsontable.com/0.19.0/demo-custom-renderers.html

var actionRenderer = function (instance, td, row, col, prop, value, cellProperties) 
  var $button = $('<button>');
  $button.html(value)
  $(td).empty().append($button); //empty is needed because you are rendering to an existing cell
;

var $container = $("#example1");
$container.handsontable(
  /*....*/
  columns: [
    /*....*/
    data: "action", renderer: actionRenderer
  ]
);

为了获得更好的性能，渲染器可以用纯 javascript 编写

【讨论】：

谢谢。这是我正在使用的过程，因为我想将自定义事件侦听器添加到“值”。

【参考方案2】：

我找到了我自己问题的答案.. 我在 handsontable 中使用“渲染器”将单元格渲染为 HTML

columns: [
                    data: "unique_no",
                    data: "title",
                    data: "subject",
                    data: "year",
                    data: "duration",
                    data: "color",
                    data: "language",
                    data: "synopsis",
                    data: "director",
                    data: "basic_format",
                    data: "created_at",
                    data: "updated_at",
                    data: "action", renderer: "html",readOnly: true

                  ],

这是我找到它的地方http://handsontable.com/demo/renderers_html.html#dropdown

【讨论】：

这应该被标记为正确答案。感谢分享！

【参考方案3】：

您可以简单地执行此自定义渲染器。

columns: [
     data: 'basicFormat', renderer: 'text',
     data: 'createdAt', renderer: 'text',
     data: 'updatedAt', renderer: 'text',
     data: 'action', renderer: 'html',    
]