SAP Fiori实现2:如何做一个下拉框（select）

2024-08-30

功能：

做一个下拉框

5_1

XML：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<mvc:View controllerName="project2.controller.FirstView" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
    <Page id="popage" title="{i18n>FirstViewTitle}">
        <content>
            <VBox id='vbox' class="sapUiSmallMargin">
                <Select id="idInProcess" change="onProcessChange" width="50%" enabled="true" editable="true"
                    forceSelection="false" selectedKey="02" 
                    items="{
							path: '/process',
							sorter: { path: 'Code' }
						}">
                    <core:Item id="_IDGenItem1" key="{Code}" text="{ProcName}" />
                </Select>
                <Select id="idInProcess1" change="onProcessChange1" width="50%" enabled="true" editable="true"
                    forceSelection="false" selectedKey="02" 
                    items="{
							path: '/process1',
							sorter: { path: 'Code' }
						}">
                    <core:Item id="_IDGenItem2" key="{Code}" text="{ProcName}" />
                </Select>
            </VBox>
        </content>
    </Page>
</mvc:View>
Controller：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
sap.ui.define([
        "sap/ui/core/mvc/Controller",
        "sap/ui/model/json/JSONModel",
        "sap/m/MessageToast",
    ], function (Controller, JSONModel,MessageToast) {
        "use strict";
    
        return Controller.extend("project2.controller.FirstView", {
            /**
             * Called when the controller is instantiated.
             * @public
             */
            onInit: function () {
 
                var jsonData = {
                    "process": [{
                            "Code": "0",
                            "ProcName": "process1"
                        },
                        {
                            "Code": "1",
                            "ProcName": "process2"
                        }
                    ],
                    "process1": [{
                        "Code": "2",
                        "ProcName": "process3"
                    },
                    {
                        "Code": "3",
                        "ProcName": "process4"
                    }
                ]
                };
                var oViewModel = new JSONModel(jsonData);
                this.getView().setModel(oViewModel);
            },
            onProcessChange: function(oEvent){
                this.process = oEvent.getSource().getSelectedKey();
                switch (this.process) {
                    case "0":
                        MessageToast.show(this.process); 
                    case "1":
                        MessageToast.show(this.process); 
                    break;
                }
            },
            onProcessChange1: function(oEvent){
                this.process = oEvent.getSource().getSelectedKey();
                switch (this.process) {
                    case "2":
                        MessageToast.show(this.process); 
                    case "3":
                        MessageToast.show(this.process); 
                    break;
                }
            }
        });
    });
Menu