handsontable单元格数据类型自定义

最新推荐文章于 2025-09-26 11:10:20 发布

原创最新推荐文章于 2025-09-26 11:10:20 发布 · 5.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#表格 #handsontable

Handsontable 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Handsontable中自定义单元格数据类型，特别是创建显示按钮的单元格。在实践中遇到点击单元格导致重复渲染的问题，通过调试找到原因在于自定义类型时错误地添加了子集。解决方法是正确理解和使用自定义函数的参数，如instance、td、row、col等。最后，文章总结了避免重复渲染的关键在于深入理解自定义单元格的参数。

Handsontable支持自定义的单元格类型，查看官方自定义渲染文档说明地址，修改出需要的数据显示类型。

单元格类型自定义的代码：

function safeHtmlRenderer(instance, td, row, col, prop, value, cellProperties) {
    var escaped = Handsontable.helper.stringify(value);
    escaped = strip_tags(escaped, '<em><b><strong><a><big>'); //be sure you only allow certain HTML tags to avoid XSS threats (you should also remove unwanted HTML attributes)
    td.innerHTML = escaped;

    return td;
  }

handsontable设置自定义类型的代码：

container1 = document.getElementById('example1');
  hot1 = new Handsontable(container1, {
    data: data,
    colWidths: [200, 200, 200, 80],
    colHeaders: ["Title", "Description", "Comments", "Cover"],
    columns: [
      {data: "title", renderer: "html"},
      {data: "description", renderer: "html"},
      {data: "comments", renderer: safeHtmlRenderer}, //自定义渲染的名称
      {data: "cover", renderer: coverRenderer} //自定义渲染的名称
    ]

根据上述例子修改为可以显示按钮的单元格类型。设置单个单元格以后，测试使用发现一个问题，只要点击单元格操作，就会重复渲染添加所自定义数据。
问题显示如图：
重复渲染问题
调试发现是自定义数据类型时重复添加子集到单元格的问题，修改后的代码如下：

function btnRenderer(instance, td, row, col, prop, value, cellProperties) {
    var btn = document.createElement('button');
    btn.textContent = value?value:'默认';
    td.innerHTML = "";  // 清空单元格子集
    td.appendChild(btn); //添加按钮到单元格
    return td;
}

设置到对应的单元格的操作：

hot.updateSettings({
    row:2, 
    col:5, 
    renderer:btnRenderer
})

**自定义函数所含的参数：**instance是hansontable的核心方法接口对象，td是要渲染的单元格，row是单元格所在的行，col是单元格所在的列，prop列索引，value是单元格的值，cellProperties是单元格的渲染方法对象。
总结：重复渲染到单元格的问题主要是对自定义函数的参数理解不够。