sapui5：如何将表列从一个视图传递到另一个
[英]sapui5: how to pass the table columns from one view to other
问题描述
Hi to all the experts, 
大家好，
I'm a quite new in sapui5 and have a following scenario in the list.view.js I've defined a simple Table: 我是sapui5的新手，并且list.view.js中有以下场景：我定义了一个简单的Table：
(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;
}
});
})();
When the Button (oNewButton) will be clicked the new view will be called (new.view.js). 单击按钮（oNewButton）后，新视图将被称为（new.view.js）。 In this view I'd like to have a form with the columns from the first view. 在此视图中，我想要一个包含第一个视图中的列的表单。
Could anyone give me some tipps how to implement such a scenario in a best way? 谁能给我一些建议，以最佳方式实现这种情况？
Thanks in advance and best regards. 在此先感谢您，并致以最诚挚的问候。 Denis 丹尼斯
1 个解决方案
解决方案1
0 2017-04-22 20:31:31
The best way to navigate from one view to another is to use the Router. 从一个视图导航到另一个视图的最佳方法是使用路由器。 Check this quick tutorial to learn how it works. 查看此快速教程以了解其工作原理。 https://sapui5.hana.ondemand.com/#docs/guide/1b6dcd39a6a74f528b27ddb22f15af0d.html https://sapui5.hana.ondemand.com/#docs/guide/1b6dcd39a6a74f528b27ddb22f15af0d.html
To pass parameters in the navigation I guess you have two options. 要在导航中传递参数，我想您有两个选择。 1.- Pass them as parameter in the route pattern. 1.-在路由模式中将它们作为参数传递。 Those will appear in the hash path. 这些将出现在哈希路径中。 Check this for the patterns options: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.core.sample.PatternMatching/preview 检查此样式选项： https : //sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.core.sample.PatternMatching/preview
2.- If you have to pass many fields, create a model in the Component scope. 2.-如果必须传递许多字段，请在“组件”作用域中创建一个模型。 The Component scope is accesible from all views. Component范围可以从所有视图访问。 Just use sap.ui.getCore().setModel() and in the target view sap.ui.getCore().getModel() Then set the Model you have get from the Core to the container where you have your form. 只需使用sap.ui.getCore（）。setModel（）并在目标视图中使用sap.ui.getCore（）。getModel（），然后将您从Core获取的Model设置为您拥有表单的容器即可。 Here a snippet: https://jsbin.com/tekisokevu/edit?html,output 这是一个片段： https : //jsbin.com/tekisokevu/edit?html，输出
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.