handsontable:如何将整个数据行(对象)用作热列的数据? [英] handsontable: how to use an entire datarow (object) as data for a hot-column?

问题描述

在我的项目中第一次使用 handsontable 0.26.x的Angular指令，我有下表:

Using the Angular directive of handsontable 0.26.x in my project first time, I have the following table:

该表显示了一些项目，它们的范围为$scope.plants，并且具有三个固定列.不过，第三列有些特殊，因为我在那里有一个特殊的渲染器，我想将整个数据行对象(植物)传递给该渲染器.

The table is showing some items, which are in scope as $scope.plants, and has three fix columns. The third column is a bit special though, because I have a special renderer there, to which I want to pass the the entire data row object (plant).

<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项目的多个属性，而不仅仅是一个属性.

The problem or question that I have now is: for the third column I have my own custom renderer (measurementRenderer), which needs multiple information from a plant. So I need to pass the entire plant object that the hot-table is currently iterating through, and not just one attribute of it, as the data of the hot-column. It's because the rendering logic of my custom renderer is based on multiple attributes of my plant item, not just one.

在上面的代码中，您可以看到放置data="???"的位置.如何引用<hot-table datarows="plants"...列表中的工厂对象?

In my code above, you can see where I put data="???". How can I reference to the plant object which is part of the list of <hot-table datarows="plants"...?

<hot-table>没有提供像<hot-table datarows="plan in plants"这样的东西，也没有提供像<hot-column data='this'或<hot-column data='self'或<hot-column data=''这样的东西.最好的方法是什么?

<hot-table> does not offer something like <hot-table datarows="plan in plants" and also nothing like <hot-column data='this' or <hot-column data='self' or <hot-column data='', as far as I can see. What would be the best approach here?

推荐答案

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

The solution I came up with is to lookup the row data from the table data source inside the renderer.

渲染器将行号作为参数，由于可以对表进行排序，因此我通过ColumnSortingPlugin的translateRow方法将行号转换为数据源的实际索引.

The renderer gets the row number as parameter, and since the table could be sorted, I translate the row number to the actual index of the datasource via translateRow method of the ColumnSortingPlugin.

最后，我将植物对象放在rowData中，并可以根据需要渲染它.

In the end, I have my plant object in rowData and can render it as I like.

$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="???">，那么data参数实际上根本就不相关. 不确定这是否是最优雅的解决方案，但它是否有效.

As for the <hot-column data="???">, the data parameter is then actually not really relevant at all. Not sure if this is the most elegant solution, but it works.

这篇关于handsontable:如何将整个数据行(对象)用作热列的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！