14

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

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() アプローチを使用した、よりクリーンなアプローチがあることを望んでいました:

4

1 に答える 1