用我们独创的方式破解Handsontable自定义渲染限制！

前端

2024-01-21 13:53:18

问题

在Handsontable中，自定义渲染器是一个回调函数，它接收两个参数：

cellValue: 单元格的值
cellProperties: 单元格的属性

默认情况下，渲染器只能接收字符串作为输入。这意味着，如果我们要渲染复杂的HTML元素，我们就需要先将这些元素转换为字符串。这可能会导致一些问题，例如：

性能下降：将复杂的HTML元素转换为字符串是一个耗时的操作。
代码可读性降低：将复杂的HTML元素转换为字符串会使代码更加难以阅读和维护。
安全问题：将复杂的HTML元素转换为字符串可能会导致安全问题，例如跨站脚本攻击。

解决方法

为了解决这些问题，我们可以修改Handsontable的源码，以便允许渲染器接收非字符串数据。具体来说，我们需要修改src/editors/_baseEditor.js文件中的第118行。

// Original code
if (typeof cellValue !== 'string') {
  cellValue = String(cellValue);
}

// Modified code
if (typeof cellValue !== 'string' && !(cellValue instanceof HTMLElement)) {
  cellValue = String(cellValue);
}

通过修改后的代码，我们可以看到，当cellValue不是字符串且不是HTMLElement时，cellValue将被转换为字符串。这意味着，我们可以直接将复杂的HTML元素传递给渲染器，而不需要先将其转换为字符串。

示例

下面是一个使用自定义渲染器渲染复杂HTML元素的示例：

const hot = new Handsontable(document.getElementById('hot'), {
  data: [
    ['John', 'Doe'],
    ['Jane', 'Smith']
  ],
  columns: [
    {
      data: 'firstName',
      renderer: function(instance, td, row, col, prop, value, cellProperties) {
        return `<b>${value}</b>`;
      }
    },
    {
      data: 'lastName',
      renderer: function(instance, td, row, col, prop, value, cellProperties) {
        return `<a href="mailto:${value}">${value}</a>`;
      }
    }
  ]
});