javascript - ui5 将项目绑定(bind)到 TableRows 而不是 TableColumns

Question

我有一个对象，我正在将它绑定(bind)到我的表，但是通常情况下，正如我所看到的那样，绑定(bind)的工作方式无处不在；你把你的东西绑定(bind)到列上。

我能否以某种方式将其更改为绑定(bind)到 Rows ？

我知道我能做并且一直习惯做的是;

在我看来:

    var vergleichTable1 = new sap.m.Table(this.createId("vergleichTable1"), {

        columns: [
            new sap.m.Column({
                header: new sap.m.Label({
                    text: "Header Text 1"
                })
            }),
            new sap.m.Column({
                header: new sap.m.Label({
                    text: "Header Text 2"
                })
            }),
            new sap.m.Column({
                header: new sap.m.Label({
                    text: "Header Text 3"
                })
            }),
        ]
    }).addStyleClass("vergleichTable1");

我正在添加某事。像这样进入我的 Controller ；

        var oTemplate1 = new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text:  "{KEYNAME}"
                }),
                new sap.m.Text({
                    text:  "{KEYNAME}"
                }),
                new sap.m.Text({
                    text:  "{KEYNAME}"
                })
            ]
        });

和连接:

this.byId("vergleichTable1").setModel(mymodel).bindItems("/foo/0", oTemplate1);

但是正如我提到的，我需要一些不同的东西。我不想将它绑定(bind)到列而是绑定(bind)到行，ui5 API 中没有关于它的信息。

这里有一些东西可以让我更容易理解我需要的东西

我希望拥有与我的 object keys.length

一样多的列

我该怎么做？

Answer 1

如果我理解了问题，下面是您想要的结果:(如果不理解，请通知我以便更正/删除我的答案)。如果您可以粘贴示例数据，那就最好了。

第一:数据:

var selProps = [
        "Prop1", "Prop2", "Prop3" // Selected Properties stored in an array
    ];
    var data = [ // Data, data, data ( with all properties)
        {
            phone:"Moto G",
            "Prop1": "Prop1-1",
            "Prop2" :"Prop1-2",
            "Prop3": "Prop1-3",
            "Prop4" :"Prop1-4"
        },
        {
            phone:"Moto X",
            "Prop1": "Prop2-1",
            "Prop2" :"Prop2-2",
            "Prop3": "Prop2-3",
            "Prop4" :"Prop2-4"
        },
        {
            phone:"iPhone",
            "Prop1": "Prop3-1",
            "Prop2" :"Prop3-2",
            "Prop3": "Prop3-3",
            "Prop4" :"Prop3-4"
        },
        {
            phone:"G Pixel 2",
            "Prop1": "Prop4-1",
            "Prop2" :"Prop4-2",
            "Prop3": "Prop4-3",
            "Prop4" :"Prop4-4"
        }

    ];

输出:

代码:查看:

var oTable =  new sap.m.Table();
    var oColTemplate = new sap.m.Column({
        header: new sap.m.Text({
            text: "{phone}"
        })
    });
    oTable.bindAggregation("columns", "/data", oColTemplate);



    oTable.bindItems("/selProps", function(sId, oContext) {
        var aCells = [];
        var oModel = oContext.getModel();
        var aCols = oModel.getProperty("/data"); // Fetch No of columns. Create that many Texts.
        for (var index = 0 ;index < aCols.length; index++) {
            // data will be stored in : /data/index/selected Property(present in oContext)

             var oText = new sap.m.Text({
                 text : "{/data/" + index + "/" + oContext.getProperty() +"}"
             });
             aCells.push(oText);
        }

        return new sap.m.ColumnListItem({
            cells: aCells
        });
    }.bind(oTable));

    return new sap.m.Page({
        title: "Title",
        content: [
            oTable
        ]
    });

Controller :

onInit: function() {

    var selProps = [
        "Prop1", "Prop2", "Prop3" // Selected Properties stored in an array
    ];
    var data = [ // Data, data, data ( with all properties)
        {
            phone:"Moto G",
            "Prop1": "Prop1-1",
            "Prop2" :"Prop1-2",
            "Prop3": "Prop1-3",
            "Prop4" :"Prop1-4"
        },
        {
            phone:"Moto X",
            "Prop1": "Prop2-1",
            "Prop2" :"Prop2-2",
            "Prop3": "Prop2-3",
            "Prop4" :"Prop2-4"
        },
        {
            phone:"iPhone",
            "Prop1": "Prop3-1",
            "Prop2" :"Prop3-2",
            "Prop3": "Prop3-3",
            "Prop4" :"Prop3-4"
        },
        {
            phone:"G Pixel 2",
            "Prop1": "Prop4-1",
            "Prop2" :"Prop4-2",
            "Prop3": "Prop4-3",
            "Prop4" :"Prop4-4"
        }

    ];

    var oModel =  new sap.ui.model.json.JSONModel({data: data, selProps: selProps});
    this.getView().setModel(oModel);
},

阅读更多关于工厂函数的信息:Factory Functions

---

更新:显示空列和行。

第 1 步:添加空列:

现在，在上面的示例中，我们将列直接绑定(bind)到当前数据。这将随着必须添加额外的列(在开头)而改变。

因此，将其粘贴到读取数据的位置(在我下面的手动 JSON 数据设置示例中)。请记住，每次读取新数据时都必须这样做:

新的 INIT 函数:

onInit: function() {

    var selProps = [
        ...// same as above: To reduce post length
    ];
    var data = [ ...// same as above: To reduce post length];

    var oModel =  new sap.ui.model.json.JSONModel({data: data, selProps: selProps});
    this.getView().setModel(oModel);

    this.fnBindColumns(); // Call function to create columns

},

fnBindColumns : function() {
    var oTable = this.byId('idTable');
    var aData = this.getView().getModel().getProperty("/data");


    var oPropCol = new sap.m.Column({
            header: new sap.m.Text({
            text: ""
        })
    });

    oTable.addColumn(oPropCol);

    for(var i = 0; i <aData.length ; i++ ) {
        var oCol = new sap.m.Column({
            header: new sap.m.Text({
                text : "{/data/" + i + "/phone}"
            })
        });
        oTable.addColumn(oCol);
    }
}

第 2 步: 添加属性行。这迫使改变我们的工厂功能。因此，在我们的 JS View 中创建内容:

    var oTable =  new sap.m.Table({
        id: this.createId("idTable") // Look Id added
    });

    oTable.bindItems("/selProps", function(sId, oContext) {
        var aCells = [];
        var oModel = oContext.getModel();
        var aCols = oModel.getProperty("/data");
        for (var index = 0 ;index < aCols.length + 1; index++) { // length = no of mobile phones + 1 ( +1 for extra property row).
            if (index == 0) { // add the property Text if first column
                var oText = new sap.m.Text({
                     text : oContext.getProperty()
                 });
            } else {
                var oText = new sap.m.Text({
                     text : "{/data/" + (index-1) + "/" + oContext.getProperty() +"}" // bind the text via absolute path.
                });
            }

             aCells.push(oText);
        }

        return new sap.m.ColumnListItem({
            cells: aCells
        });
    }.bind(oTable));

新表:

希望这对您有所帮助。