2014-02-12 3 views
12

Ich habe Probleme, die dynamische Bindung meiner Tabellenspalten und -zeilen zu erhalten.Dynamisches Binden von Tabellenspalten und -zeilen

Angenommen, ich habe zwei Modelle, eine der Tabellenspalte Info Halten:

var aColumnData = [ 
     { 
      columnId : "col1" 
     }, 
     { 
      columnId : "col2" 
     }, 
     { 
      columnId : "col3" 
     }, 
     { 
      columnId : "col4" 
     }, 
     { 
      columnId : "col5" 
     } 
    ]; 

und eine mit den Daten:

var aData = [ 
    { 
     col1 : "Row 1 col 1", 
     col2 : "Row 1 col 2", 
     col3 : "Row 1 col 3", 
     col4 : "Row 1 col 4", 
     col5 : "Row 1 col 5" 
    }, 
    { 
     col1 : "Row 2 col 1", 
     col2 : "Row 2 col 2", 
     col3 : "Row 2 col 3", 
     col4 : "Row 2 col 4", 
     col5 : "Row 2 col 5" 
    } 
]; 

Ich habe dann das Modell:

var oModel = new sap.ui.model.json.JSONModel(); 
    oModel.setData({ 
     columns : aColumnData, 
     rows : aData 
    }); 

Ich erstelle dann meine Tabelle in der Ansicht:

var oTable = new sap.ui.table.Table(); 

    var oColumnTemplate = new sap.ui.table.Column({ 
     label : "{columnDesc}", 
     template : new sap.ui.commons.TextView().bindProperty("text", "<this_should_be_dynamic_but_how?>") 
    }); 

    oTable.bindColumns("/columns", oColumnTemplate); 
    oTable.bindRows("/rows"); 

Der Teil, der mich behebt, ist die Bindung an die aktuelle Spalte in der TextView-Vorlage; das sollte dynamisch sein ("col1", "col2", etc) und spontan erledigt werden - das ist, was Bindungen für sowieso sind, nehme ich an - aber ich kann es nicht zur Arbeit bringen ...

Ich denke Ich vermisse etwas Einfaches und Triviales, aber ich bin jetzt ein bisschen verloren ... Jede Hilfe wird sehr geschätzt!

==============================

EDIT: Ich habe es durch Iterieren durch die Arbeit Spalten-Array und mit Hilfe der addColumn() -Methode:

jQuery.each(aColumnData, function(i, v) { 
     oTable.addColumn(new sap.ui.table.Column({ 
      label : v.columnDesc, 
      template: new sap.ui.commons.TextView().bindProperty("text", v.columnId) 
     })); 
    }); 

... aber ich war es gehofft, wäre ein sauberer Ansatz, um die bindColumns mit sein()/bindRows() Ansatz:

Antwort

17

I habe etwas ähnliches vor using factory functions siehe 0 getanfür ähnliches Beispiel bei Ihnen

var oTable = new sap.ui.table.Table({ 
    title: "Table column and data binding", 
    showNoData : true, 
    columnHeaderHeight : 10, 
    visibleRowCount: 7 
}); 
oTable.setModel(oModel); 
oTable.bindColumns("/columns", function(sId, oContext) { 
    var sColumnId = oContext.getObject().columnId; 
    return new sap.ui.table.Column({ 
     id : sColumnId, 
     label: sColumnId, 
     template: sColumnId, 
     sortProperty: sColumnId, 
     filterProperty: sColumnId 
    }); 
}); 
oTable.bindRows("/rows"); 

Sie 2 global genannten Modelle in diesem Szenario nutzen könnten, eine für die Metadaten eines für die Daten zB

sap.ui.getCore().setModel(oMetaModel, 'meta'); 
sap.ui.getCore().setModel(oDataModel, 'data'); 
.. 
oTable.bindColumns("meta>/columns" function... 
oTable.bindRows("data>/rows"); 

Heres ein Beispiel jsbin example of dynamic columns based on OData metadata

+2

Excellent @ Jasper_07, funktioniert wie ein Zauber! Du bist ein wahres Leben ** und ** Zeitsaver! :-) – Qualiture

+0

ist es auch möglich, eine einzelne Zeile aus einer Textview-Vorlage und alle anderen aus einer Link-Vorlage zu modifizieren? – zyrex

+1

@zyrex Ja, Sie können nach dem Binden der Vorlage und der Daten ein Element im Index 0 einfügen, indem Sie oTable.insertRow (oRow, iIndex) verwenden –