Question

我想将一个事件附加到sap.m.Select控件末尾的按钮，以调用后端以查看该控件下拉列表中显示的值。如何实现这一目标？

谢谢！

Answer 1

请检查此运行示例。希望它能给你一些提示。谢谢！

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_belize" data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="myXmlView" type="ui5/xmlview">
    <mvc:View height="100%" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" controllerName="MyController" displayBlock="true">
        <Select id="test_select" forceSelection="false" items="{
					path: '/ProductCollection',
					sorter: { path: 'ProductId' }
				}">
				<core:Item key="{ProductId}" text="{ProductId}" />
			</Select>
    </mvc:View>
</script>
<script>
    sap.ui.getCore().attachInit(function() {
        "use strict";
        sap.ui.define([
            "jquery.sap.global",
            "sap/ui/core/mvc/Controller",
            "sap/ui/model/json/JSONModel",
        ], function(jQuery, Controller, JSONModel) {
            "use strict";
            return Controller.extend("MyController", {
                onInit: function() {
                    this.oModel = new JSONModel();

                    this.getView().setModel(this.oModel);
                    var that = this;
                    var oSelect = this.getView().byId("test_select");
                    oSelect.ontap = function(oEvent) {
                        if (!oSelect.isOpen()) {
                            oSelect.setBusy(true);
                            that.oModel.setData({});
                            var callBackend = function() {
                                that.simulateBackendData();
                                oSelect.setBusy(false);
                            }
                            setTimeout(callBackend, 3000);
                        }
                        sap.m.Select.prototype.ontap.apply(this, arguments);
                    };

                },

                simulateBackendData: function() {

                    var oData = {
                        "ProductCollection": [{
                                "ProductId": Math.random()
                            },
                            {
                                "ProductId": Math.random()
                            },
                            {
                                "ProductId": Math.random()
                            },
                            {
                                "ProductId": Math.random()
                            },
                        ]
                    };

                    this.oModel.setData(oData);
                }

            });
        });
        sap.ui.xmlview({
            viewContent: jQuery("#myXmlView").html()
        }).placeAt("content");
    });
</script>
</head>

<body class="sapUiBody" id="content" role="application">
</body>

</html>

SAPUI5 / OpenUI5：单击sap.m.Select时的事件

1 个答案: