web-dev-qa-db-fra.com

Liaison dynamique de colonnes et de lignes de table

Je rencontre des problèmes pour que la liaison dynamique de mes colonnes et lignes de table fonctionne.

Supposons que j'ai deux modèles, l'un contenant les informations de la colonne du tableau:

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

et un avec les données:

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"
    }
];

J'ai ensuite défini le modèle:

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

Je crée ensuite ma table dans la vue:

    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");

La partie qui me dérange est la liaison à la colonne actuelle dans le modèle TextView; cela devrait être dynamique ("col1", "col2", etc.) et fait à la volée - c'est ce que les liaisons sont de toute façon je suppose - mais je ne peux pas le faire fonctionner ...

Je suppose qu'il me manque quelque chose de simple et trivial, mais je suis un peu perdu maintenant ... Toute aide est très appréciée!

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

EDIT: je l'ai fait fonctionner en itérant dans le tableau de colonnes et en utilisant la méthode addColumn ():

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

... mais j'espérais qu'il y aurait une approche plus propre en utilisant l'approche bindColumns ()/bindRows ():

sapui5
14
Qualiture

J'ai fait quelque chose de similaire avant en utilisant les fonctions d'usine voir exemple jsbin pour un exemple similaire au vôtre

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");

vous pouvez utiliser 2 modèles nommés globalement dans ce scénario, un pour les métadonnées, un pour les données, par exemple

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

Voici un exemple exemple jsbin de colonnes dynamiques basées sur des métadonnées OData

20
Jasper_07