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

时间:2016-03-10 21:09:18

标签: sapui5

我正在使用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 Link - http://jsbin.com/quhomoloqo/edit?html,console,output

1 个答案:

答案 0 :(得分:3)

请参阅此工作示例:

请注意(为了这个问题)如何创建两个模型: 一个名为' orig'它包含您原始的OPERATORODRD数据,以及 一个名为'数据'它包含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>
&#13;
&#13;
&#13;