如何在sapui5 m.table中将JSON作为函数参数获取?

问题描述 投票:0回答:1

我试图在动态表中创建动态comboboxmultiInput。您可以在下面看到我期望的视图屏幕和我自己的代码。

enter image description here

onCreateTable: function () {
        var summaryDetailData = {
            "subvariants": [{
                "kontrolNesnesiTanim": "test 1 Tanım",
                "kontrolNesnesiBelirtim": "test 1 Belirtim",
                "type": "comboBox",
                "kontrolSonucu": {
                    "test0": "test00",
                    "test1": "test10",
                    "test2": "test20"
                },
                "kontrolEdilecek": 20,
                "kontrolEdilen": 0,
                "icon": "sap-icon://accept"
            }, {
                "kontrolNesnesiTanim": "test 2 Tanım",
                "kontrolNesnesiBelirtim": "test 2 Belirtim",
                "type": "input",
                "kontrolSonucu": {
                    "test0": "test00",
                    "test1": "test10",
                    "test2": "test20",
                    "test3": "test30"
                },
                "kontrolEdilecek": 10,
                "kontrolEdilen": 0,
                "icon": "sap-icon://decline"
            } ]
        };

        var oTable = new sap.m.Table("idRandomDataTable", {
            headerToolbar: new sap.m.Toolbar({
                content: [new sap.m.Label({
                    text: ""
                })]
            }),
            columns: [new sap.m.Column({
                width: "2em",
                header: new sap.m.Label({
                    text: "Kontrol Nesnesi"
                })
            }), new sap.m.Column({
                width: "2em",
                header: new sap.m.Label({
                    text: "Kontrol Sonucu"
                })
            }), new sap.m.Column({
                width: "2em",
                header: new sap.m.Label({
                    text: "Kontrol Edilecek"
                })
            })]
        });
        this.getView().byId("SimpleFormChange480_TrialSonuc").addContent(oTable);
        oTable.bindItems("/subvariants", new sap.m.ColumnListItem({
            cells: [new sap.m.ObjectIdentifier({
                    title: "{kontrolNesnesiTanim}",
                    "titleActive": true,
                    text: "{kontrolNesnesiBelirtim}"
                 }),
                 this.kontrolSonucu("{type}"), 
                 new sap.m.Input({
                    value: "{kontrolEdilen}"
                })
            ]
        }));

        oTable.setModel(new sap.ui.model.json.JSONModel(summaryDetailData));
    },

    kontrolSonucu: function (type) {
        if (type === "input") {
            return new sap.m.MultiInput({
                showValueHelp: false
            });
        } else {
            return new sap.m.ComboBox({
                items: {
                    path: "kontrolSonucu/",
                    template: new sap.ui.core.Item({
                        key: "{}",
                        change: "onChange",
                        text: "{}"
                    })
                }
            });
        }
    }

如何将JSON作为函数参数?

而且我想使用sap.m.table库而不是sap.ui.table

我期待你的回应。

json function dynamic sapui5
1个回答
0
投票

您可以使用工厂功能实现它

onCreateTable: function () {
        var summaryDetailData = {
            "subvariants": [{
                "kontrolNesnesiTanim": "test 1 Tanım",
                "kontrolNesnesiBelirtim": "test 1 Belirtim",
                "type": "comboBox",
                "kontrolSonucu": {
                    "test0": "test00",
                    "test1": "test10",
                    "test2": "test20"
                },
                "kontrolEdilecek": 20,
                "kontrolEdilen": 0,
                "icon": "sap-icon://accept"
            }, {
                "kontrolNesnesiTanim": "test 2 Tanım",
                "kontrolNesnesiBelirtim": "test 2 Belirtim",
                "type": "input",
                "kontrolSonucu": {
                    "test0": "test00",
                    "test1": "test10",
                    "test2": "test20",
                    "test3": "test30"
                },
                "kontrolEdilecek": 10,
                "kontrolEdilen": 0,
                "icon": "sap-icon://decline"
            } ]
        };

        var oTable = new sap.m.Table({
            headerToolbar: new sap.m.Toolbar({
                content: [new sap.m.Label({
                    text: ""
                })]
            }),
            columns: [new sap.m.Column({
                width: "2em",
                header: new sap.m.Label({
                    text: "Kontrol Nesnesi"
                })
            }), new sap.m.Column({
                width: "2em",
                header: new sap.m.Label({
                    text: "Kontrol Sonucu"
                })
            }), new sap.m.Column({
                width: "2em",
                header: new sap.m.Label({
                    text: "Kontrol Edilecek"
                })
            })]
        });
        sap.ui.getCore().byId("tableWrapper").addItem(oTable); //Comment this code and uncomment the below code for table rendering
        //this.getView().byId("SimpleFormChange480_TrialSonuc").addContent(oTable);

        oTable.bindItems({
            path: "/subvariants",
            factory: this.populateItems.bind(this) //factory function
        });
        oTable.setModel(new sap.ui.model.json.JSONModel(summaryDetailData));
    },
    /* Factory function */
    populateItems: function(sId, oContext) { 
        var oInput = null;
        switch(oContext.getObject().type) {
            case "comboBox":
                oInput = new sap.m.ComboBox({ });
                break;
            case "input":
                oInput = new sap.m.MultiInput({ });
                break;
        }       
        var oRow = new sap.m.ColumnListItem(sId, {
            type: "Active",
            cells: [
               new sap.m.Text({ text: "{kontrolNesnesiTanim}" }),
               new sap.m.Text({ text: "{kontrolNesnesiBelirtim}" }),
               oInput
            ]
        });
        return oRow;
    },
© www.soinside.com 2019 - 2024. All rights reserved.