web-dev-qa-db-ja.com

テーブルの列と行の動的バインディング

テーブルの列と行の両方を動的にバインドして機能させるのに問題があります。

2つのモデルがあり、1つがテーブルの列情報を保持しているとします：

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

そして、データを持つもの：

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

次に、モデルを設定します。

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

次に、ビューにテーブルを作成します。

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

私を悩ませている部分は、TextViewテンプレートの現在の列へのバインドです。これは動的（ "col1"、 "col2"など）で、オンザフライで行われる必要があります（とにかく、これがバインディングの目的です）。しかし、動作させることはできません...

私はシンプルでつまらないものを見逃していると思いますが、今は少し迷っています...どんな助けも大歓迎です！

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

編集：列配列を反復処理し、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) 
        })); 
    });

...しかし、bindColumns（）/ bindRows（）アプローチを使用するよりクリーンなアプローチがあることを望んでいました：

sapui5
14
Qualiture

ファクトリー関数を使用 を参照してください jsbinの例 あなたのものに似た例

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

このシナリオでは、2つのグローバル名前付きモデルを使用できます。1つはメタデータ用、もう1つはデータ用です

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

例 ODataメタデータに基づく動的列のjsbinの例

20
Jasper_07