handsontable：如何将整个数据行（对象）用作热列的数据？

Posted 2023-03-22

【中文标题】handsontable：如何将整个数据行（对象）用作热列的数据？

【英文标题】：handsontable: how to use an entire datarow (object) as data for a hot-column?

【发布时间】：2017-01-01 00:13:11

【问题描述】：

在我的项目中第一次使用handsontable0.26.x的Angular指令，我有下表：

该表显示了一些项目，它们的范围为$scope.plants，并具有三个修复列。第三列有点特别，因为我在那里有一个特殊的渲染器，我想将整个数据行对象（植物）传递给它。

<hot-table datarows="plants" settings="hotTableSettings">
  <hot-column data="name" title="Name"></hot-column>
  <hot-column data="power" title="Power"></hot-column>
  <hot-column data="???" title="AdditionalInfo" renderer="measurementRenderer"></hot-column>
</hot-table>

我现在遇到的问题或疑问是：对于第三列，我有自己的自定义渲染器（measurementRenderer），它需要来自plant 的多个信息。所以我需要传递热表当前正在迭代的整个植物对象，而不仅仅是它的一个属性，作为hot-column 的数据。这是因为我的自定义渲染器的渲染逻辑是基于我的plant 项目的多个属性，而不仅仅是一个。

在我上面的代码中，您可以看到我将data="???" 放在哪里。如何引用 <hot-table datarows="plants"... 列表中的植物对象？

<hot-table> 不提供 <hot-table datarows="plan in plants" 之类的东西，也没有像 <hot-column data='this' 或 <hot-column data='self' 或 <hot-column data='' 这样的东西，据我所知。这里最好的方法是什么？

【参考方案1】：

我想出的解决方案是从渲染器内部的表数据源中查找行数据。

渲染器获取行号作为参数，由于表格可以排序，我通过ColumnSortingPlugin的translateRow方法将行号转换为数据源的实际索引。

最后，我在rowData 中有我的植物对象，可以随意渲染它。

$scope.measurementRenderer = function (instance, td, row, col, prop, value, cellProperties) 

    var translatedRow = instance.getPlugin('columnSorting').translateRow(row);
    var rowData = instance.getSourceData()[translatedRow];

    td.innerhtml = rowData. (... any special logic here)

    return td;
;

对于<hot-column data="???">，数据参数实际上根本不相关。 不确定这是否是最优雅的解决方案，但它确实有效。