sapui5：如何将表列从一个视图传递到另一个视图-Java 学习之路

嗨，所有的专家，

我是sapui5中的一个新手，并且在list.view.js中有以下场景我已经定义了一个简单的表：

(function () {
    "use strict";

sap.ui.jsview("fst.app.cList", {

    getControllerName: function () {
        return "fst.app.cList";
    },

    createContent: function (oController) {

        //Back button
        var oBackButton = new sap.m.Button({
            text: "Back",
            icon: "sap-icon://arrow-left",
            press: oController.handleButtonPress
        });

        //New contract button
        var oNewButton = new sap.m.Button({
            text: "New",
            icon: "sap-icon://add-document",
            press: oController.addNewButtonPress
        });

        //Spacer
        var oSpacer = sap.m.ToolbarSeparator();

        //Table body
        var oTable = sap.m.Table({
            insert: true,
            headerText: "List of Items",
            headerDesign: sap.m.ListHeaderDesign.Standard,
            mode: sap.m.ListMode.None,
            includeItemInSelection: false
        });

        //Columns
        var col01 = new sap.m.Column("col01", {
            header: new sap.m.Label({
                text: "Number"
            })
        });
        oTable.addColumn(col01);

        var col02 = new sap.m.Column("col02", {
            header: new sap.m.Label({
                text: "Product"
            })
        });
        oTable.addColumn(col02);

        var col03 = new sap.m.Column("col03", {
            header: new sap.m.Label({
                text: "Date"
            })
        });
        oTable.addColumn(col03);

        var colItems = new sap.m.ColumnListItem("colItems", {
            type: "Active"
        });
        oTable.bindAggregation("items", "/value", colItems);

        var txtNAME = new sap.m.Text("txtNAME", {
            text: "{ProductID}"
        });
        colItems.addCell(txtNAME);

        var txtNAME2 = new sap.m.Text("txtNAME2", {
            text: "{ProductName}"
        });
        colItems.addCell(txtNAME2);

        var txtNAME3 = new sap.m.Text("txtNAME3", {
            text: "{UnitsInStock}"
        });
        colItems.addCell(txtNAME3);

        var page = new sap.m.Page({

            title: "Test",
            enableScrolling: false,
            content: [oBackButton, oSpacer, oNewButton, oTable]

        });

        return page;
    }
    });
})();

单击Button（oNewButton）时，将调用新视图（new.view.js） . 在这个视图中，我想要一个包含第一个视图中列的表单 .

谁能给我一些tipps如何以最好的方式实现这样的场景？

在此先感谢您的问候 . 丹尼斯

1 回答

从一个视图导航到另一个视图的最佳方法是使用路由器 . 查看此快速教程以了解其工作原理 . https://sapui5.hana.ondemand.com/#docs/guide/1b6dcd39a6a74f528b27ddb22f15af0d.html

要在导航中传递参数，我猜你有两个选择 . 1.-将它们作为路径模式中的参数传递 . 这些将出现在哈希路径中 . 检查此模式选项：https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.core.sample.PatternMatching/preview

2.-如果必须传递许多字段，请在“组件”范围中创建模型 . 可以从所有视图访问Component范围 . 只需使用sap.ui.getCore（） . setModel（）并在目标视图中使用sap.ui.getCore（） . getModel（）然后将您从Core获得的Model设置为您拥有表单的容器 . 这里有一个片段：https://jsbin.com/tekisokevu/edit?html,output

<!DOCTYPE html>
<html><head>
	<meta http-equiv='X-UA-Compatible' content='IE=edge' >
	<meta charset="UTF-8" >
	<title>test</title>

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

	<script id="view1" type="sapui5/xmlview">
		<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
			<core:ComponentContainer name='my.comp'/>
		</mvc:View>
	</script>

	<script id="home" type="sapui5/xmlview">
		<mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
			controllerName="my.controller1">
			<Page>
				<Table id="myTable">
                    <headerToolbar>
                        <Toolbar>
                            <Title text="Modify the column names and press + ==> " />
                            <ToolbarSpacer/>
                            <Button icon="sap-icon://add" press="onAddPress"/>
                        </Toolbar>
                    </headerToolbar>
                    <columns>
                        <Column>
                            <Input palceholder="Column Name" value="Column1"/>
                        </Column>
                        <Column>
                            <Input palceholder="Column Name" value="Column2"/>
                        </Column>
                        <Column>
                            <Input palceholder="Column Name" value="Column3"/>
                        </Column>
                    </columns>
                    <items>
                        <ColumnListItem>
                            <cells>
                                <Text text="Text1" />
                                <Text text="Text2" />
                                <Text text="Text3" />
                            </cells>
                        </ColumnListItem>
                        <ColumnListItem>
                            <cells>
                                <Text text="Text1" />
                                <Text text="Text2" />
                                <Text text="Text3" />
                            </cells>
                        </ColumnListItem>
                        <ColumnListItem>
                            <cells>
                                <Text text="Text1" />
                                <Text text="Text2" />
                                <Text text="Text3" />
                            </cells>
                        </ColumnListItem>
                    </items>
                </Table>
			</Page>
		</mvc:View>
	</script>

	<script id="add" type="sapui5/xmlview">
		<mvc:View xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
			controllerName="my.controller2">
			<Page id="page" showNavButton="true" navButtonPress="onBack">
                <VBox items="{columnsModel>/columns}">
                  <items>
                    <HBox class="sapUiLargeMarginBegin">
                      <Label text="{columnsModel>columnName}:" class="sapUiSmallMarginEnd sapUiSmallMarginTop"/>
                      <Input placeholder="{columnsModel>columnName} value"/>
                    </HBox>
                  </items>
                </VBox>
			</Page>
		</mvc:View>
	</script>
  
	<script>
		// jQuery.sap.declare("my.comp.Component");
		sap.ui.define("my/comp/Component", ["sap/ui/core/UIComponent"], function(UIComponent) {
			return UIComponent.extend("my.comp.Component", {
				metadata : {
					name : "GreatComponent",
					version : "1.0",
					includes : [],
					dependencies : {
						libs : ["sap.m"]
					},
					routing: {
						config: {
							routerClass: "sap.m.routing.Router",
							viewType: "XML",
							viewPath: "my",
							controlId: "app",
							transition: "slide",
							controlAggregation: "pages"
						},
						routes: [
							{
								name: "home",
								pattern: "",
								target: "home"
							},
							{
								name: "add",
								pattern: "add",
								target: "add"
							}
						],
						targets: {
							home: {
								viewName: "Home",
								title: "home"
							},
							add: {
								viewName: "Add",
								title: "add"
							}
						}
					}
				},
				init: function() {
					sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
					var oRouter = this.getRouter();
					var oViews = oRouter.getViews();
					this.runAsOwner(function() {
						var myHome = sap.ui.xmlview({viewContent:jQuery('#home').html()});
						oViews.setView("my.Home", myHome);
						var myAdd = sap.ui.xmlview({viewContent:jQuery('#add').html()});
						oViews.setView("my.Add", myAdd);
					});
					oRouter.initialize();
				},
				createContent : function() {
					var componentData = this.getComponentData();
					return new sap.m.App("app", {
					});
				}
			});
		});
      
		sap.ui.define("my/controller1", [
          "sap/ui/core/UIComponent"
        ],function(UIComponent) {
			return sap.ui.controller("my.controller1", {
				onInit: function() {
					this.oRouter = UIComponent.getRouterFor(this.getView());

                    var oModel = new sap.ui.model.json.JSONModel();
                    var oData = {
                       columns: []
                    }
                    oModel.setData(oData);
                    sap.ui.getCore().setModel(oModel, "columnsModel");
				},
              
				onAddPress: function() {
                    var aColumnsNames = [];
                    var aColumns = this.getView().byId("myTable").getColumns();
                    for (var i=0; i<aColumns.length; i++){
                        var sColumnName = aColumns[i].getHeader().getValue();
                        var oItem = {columnName: sColumnName};
                        aColumnsNames.push(oItem);
                    }
                    sap.ui.getCore().getModel("columnsModel").setProperty("/columns", aColumnsNames);
                  
                  
					this.oRouter.navTo("add");
                }
			});
		});
      
		sap.ui.define("my/controller2", [
          "sap/ui/core/UIComponent"
        ],function(UIComponent) {
			return sap.ui.controller("my.controller2", {
				onInit: function() {
					this.oRouter = UIComponent.getRouterFor(this.getView());
                  
                    var oModel = sap.ui.getCore().getModel("columnsModel");
                    this.getView().byId("page").setModel(oModel, "columnsModel");
				},
                onBack: function(){
                    this.oRouter.navTo("home");
                }
			});
		});
		sap.ui.require(["my/comp/Component"], function(myComp) {
			// instantiate the View
			sap.ui.xmlview({viewContent:jQuery('#view1').html()}).placeAt('content');
		});
	</script>

</head>
<body class='sapUiBody'>
	<div id='content'></div>
</body>
</html>

回复于 2024-05-06T12:36:28+08:00

sapui5：如何将表列从一个视图传递到另一个视图

1 回答

相关问题