从 sap.m 中获取所选项目。从 sapui5 表列中选择

Question

我正在使用 sap.m.Table，其中有 3 列，分别为 sap.m.text、sap.m.setect，最后一列是按钮。

我的型号代码

var oModel = new sap.ui.model.odata.OData("url");
sap.ui.getCore().setModel(oModel ,"data");

表格视图代码（单元格）

var oTemplate = new sap.m.ColumnListItem({
        cells : [
            new sap.m.Text({
                text: "{data>Address}"
            }),
            new sap.m.Select({
                id:"sel",
                items: {
                    path: "data>/OPERATORS", // this is a diffent table
                    template: new sap.ui.core.Item({
                    text: "{data>firstName} {data>lastName}"
                    })
                },
                forceSelection: false

            }),
            new sap.m.Button({
                        text : "Start",
                        press : [oController.onPressStart, oController]
             })
        ]
    });
oTable.bindItems("data>/ORDR", oTemplate); //differnt table

工作正常，获取特定表上的所有必需数据。（注意第一列来自 ORDR 表，第二列来自 OPERATORS 表）。

现在单击按钮时，我想要特定的行数据。我的代码如下-

onPressStart : function(oEvent){  
   var obj = oEvent.getSource().getBindingContext("data").getObject();
   },

“obj”给了我 ORDR 表行对象（我按下按钮的地方）。

现在我还想要在下拉框中选择的值。如何获得。

请推荐，谢谢

JSbin 链接 - http://jsbin.com/quhomoloqo/edit?html,console,output

Answer 1

查看这个工作示例：

请注意（为了这个问题）如何创建两个模型： 一个名为 'orig' 的文件包含您的原始 OPERATOR 和 ODRD 数据，以及 一个名为 'data' 的文件，其中包含 OPERATOR 数据的副本，并添加了 Address 属性。

查看如何使用这两种模型的视图代码（新的用于表格，旧的用于填充下拉菜单）

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
    },

    onAfterRendering : function() {
        // your original model
        var oModel        = new sap.ui.model.json.JSONModel();

        var oData = {
            "ODRD":[
                {"Address":"UK"},
                {"Address":"US"}
            ],
            "OPERATORS":[
                {"firstName":"a","lastName":"b"},
                {"firstName":"c","lastName":"d"}
            ]
        };

        oModel.setData(oData);

        this.getView().setModel(oModel, "orig");

        // the model you actually need
        var oNewModel     = new sap.ui.model.json.JSONModel();

        var oNewData = oData.OPERATORS.map(function(result) {
            return {
                firstName : result.firstName,
                lastName : result.lastName,
                keyToAddress : null
            }
        })

        oNewModel.setData({
            "OPERATORS" : oNewData
        });

        this.getView().setModel(oNewModel, "data");
    },

    showData : function(oEvent) {
        alert(JSON.stringify(oEvent.getSource().getBindingContext("data").getObject()));
    }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <Table id="tbl" items="{data>/OPERATORS}">
            <columns>
                <Column>
                    <Text text="First" />
                </Column>
                <Column>
                    <Text text="Last" />
                </Column>
                <Column>
                    <Text text="ODRD" />
                </Column>
                <Column>
                    <Text text="" />
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <Input value="{data>firstName}" />
                        <Input value="{data>lastName}" />
                        <Select items="{orig>/ODRD}" selectedKey="{data>keyToAddress}">
                            <items>
                                <core:ListItem key="{orig>Address}" text="{orig>Address}" />
                            </items>
                        </Select>
                        <Button text="Show data" press="showData" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </mvc:View>
</script>