2016-08-24 1 views
0

Mit Hilfe der Winkel Richtlinie von handsontable 0.26.x in meinem Projekt erste Mal, ich habe die folgende Tabelle:handsontable: Wie benutzt man ein ganzes Datarow (Objekt) als Daten für eine Hot-Column?

Die Tabelle einige Elemente zeigt, die als $scope.plants in ihrem Umfang sind, und hat drei fix Spalten. Die dritte Spalte ist allerdings etwas Besonderes, da ich dort einen speziellen Renderer habe, an den ich das gesamte Datenzeilenobjekt (Anlage) übergeben möchte.

<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> 

Das Problem oder eine Frage, die ich jetzt habe, ist: für die dritte Spalte ich meine eigenen benutzerdefinierten Renderer (measurementRenderer) haben, die von einem plant mehrere Informationen benötigt. So Ich muss das gesamte Anlageobjekt übergeben, dass die Hot-Tabelle derzeit durchläuft, und nicht nur ein Attribut davon, als die Daten der hot-column. Das liegt daran, dass die Renderlogik meines benutzerdefinierten Renderers auf mehreren Attributen meines Elements basiert, nicht nur auf einem.

In meinem Code oben können Sie sehen, wo ich data="???" setzen. Wie kann ich auf das Anlagenobjekt verweisen, das Teil der Liste <hot-table datarows="plants"... ist?

<hot-table> nicht so etwas wie <hot-table datarows="plan in plants" bieten und auch nichts, wie <hot-column data='this' oder <hot-column data='self' oder <hot-column data='', soweit ich sehen kann. Was wäre der beste Ansatz hier?

Antwort

0

Die Lösung kam ich mit den Zeilendaten aus dem Tabellendatenquelle innerhalb des Renderers nachzuzuschlagen.

Der Renderer erhält die Zeilennummer als Parameter, und da die Tabelle sortiert werden kann, übersetze ich die Zeilennummer in den tatsächlichen Index der Datenquelle über translateRow Methode der ColumnSortingPlugin.

Am Ende habe ich meine Anlage Objekt in rowData und kann es machen, wie Ich mag.

$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; 
}; 

Was die <hot-column data="???"> ist der Datenparameter dann wirklich eigentlich nicht relevant. Nicht sicher, ob dies die eleganteste Lösung ist, aber es funktioniert.

Verwandte Themen