使用Form和GridTable在Sapui5上进行布局
我想在同一个水平布局上显示Simpleform和Gridtable
这是我的XML视图：
<mvc:View
controllerName="sap.ui.demo.cart.view.DcpFicheVente"
class="sapUiSizeCompact"
xmlns="sap.ui.table"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:u="sap.ui.unified"
xmlns:core="sap.ui.core"
xmlns:m="sap.m"
>
<l:Grid defaultSpan="L7 M7 S7" class="sapUiSmallMarginTop sapUiSmallMargin">
<l:content>
<f:SimpleForm id="SimpleFormChange472"
maxContainerCols="2"
editable="true"
layout="ResponsiveGridLayout"
labelSpanL="3"
labelSpanM="3"
emptySpanL="0"
emptySpanM="0"
columnsL="2"
columnsM="2"
adjustLabelSpan="false"
class="editableForm">
<f:content>
<m:Label text="{ScreenModel>/num_document}" />
<m:Input value="{SupplierName}" >
<m:layoutData>
<l:GridData span="L3 M3 S3" />
</m:layoutData>
</m:Input>
<m:Label text="{ScreenModel>/date_document}" />
<m:Input value="{Street}">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Label text="{ScreenModel>/date_livraison}" />
<m:DatePicker
id="DP4"
value="{path:'/dateValue', type:'sap.ui.model.type.Date', formatOptions: { style: 'medium', strictParsing: true}}"
class="sapUiSmallMarginBottom"
>
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:DatePicker>
<m:Label text="{ScreenModel>/commercial}" />
<m:Select items="{ path: 'ScreenModel>/commerciaux',
sorter: { path: 'long_name' }
}"
autoAdjustWidth="true">
<core:Item text="{ScreenModel>long_name}" key="{ScreenModel>id}" />
</m:Select>
<m:Label text="{ScreenModel>/magasin}" />
<m:Select items="{ path: 'ScreenModel>/store',
sorter: { path: 'code' }
}"
autoAdjustWidth="true">
<core:Item text="{ScreenModel>code} - {ScreenModel>description}" key="{ScreenModel>id}" />
</m:Select>
<m:Label text="{ScreenModel>/client}" />
<m:Input value="{SupplierName}" liveChange="onClient" >
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Label text="Street/No." />
<m:Input value="{Street}">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Input value="{HouseNumber}">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Label text="ZIP Code/City" />
<m:Input value="{ZIPCode}">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Input value="{City}" />
<m:Label text="Country" />
<m:Select width="100%">
<m:items>
<core:Item text="Germany" />
<core:Item text="USA" />
<core:Item text="England" />
</m:items>
</m:Select>
</f:content>
</f:SimpleForm>
<Table
id="table1"
selectionMode="MultiToggle"
rows="{/ProductCollection}"
visibleRowCount="7"
showColumnVisibilityMenu="{ui>/showVisibilityMenuEntry}"
enableColumnFreeze="{ui>/showFreezeMenuEntry}"
enableCellFilter="{ui>/enableCellFilter}"
columnSelect="onColumnSelect"
cellContextmenu="onProductIdCellContextMenu"
ariaLabelledBy="title">
<toolbar>
<m:Toolbar>
<m:Title id="title1" text="Products"></m:Title>
<m:ToolbarSpacer/>
<m:ToggleButton
icon="sap-icon://show"
tooltip="Enable / Disable Visibility Menu Entries"
pressed="{ui>/showVisibilityMenuEntry}"/>
<m:ToggleButton
icon="sap-icon://resize-horizontal"
tooltip="Enable / Disable Freezing Menu Entries"
pressed="{ui>/showFreezeMenuEntry}"/>
<m:ToggleButton
icon="sap-icon://grid"
tooltip="Enable / Disable Cell Filter"
pressed="{ui>/enableCellFilter}"/>
</m:Toolbar>
</toolbar>
<columns>
<Column
id="name1"
width="11rem"
sortProperty="Name"
filterProperty="Name"
showFilterMenuEntry="true"
showSortMenuEntry="true">
<m:Label text="Product Name" />
<template>
<m:Text text="{Name}"/>
</template>
</Column>
<Column
id="productId1"
filterProperty="ProductId"
sortProperty="ProductId"
width="11rem">
<m:Label text="Product Id" />
<template>
<m:Text text="{ProductId}"/>
</template>
</Column>
<Column
id="image1"
width="9rem"
columnMenuOpen="onColumnMenuOpen">
<m:Label text="Image" />
<template>
<m:Link text="Show Image" href="{ProductPicUrl}" target="_blank"/>
</template>
</Column>
<Column
id="quantity1"
width="6rem"
hAlign="End"
sortProperty="Quantity">
<m:Label text="Quantity" />
<template>
<m:Label text="{
path: 'Quantity',
type: 'sap.ui.model.type.Integer'
}" />
</template>
<menu>
<u:Menu ariaLabelledBy="quantity">
<u:items>
<u:MenuItem
text="My custom menu entry"
select="onQuantityCustomItemSelect"
/>
<u:MenuItem
text="Sort"
select="onQuantitySort"
icon="sap-icon://sort"
/>
</u:items>
</u:Menu>
</menu>
</Column>
<Column width="9rem">
<m:Label text="Delivery Date" />
<template>
<m:Text text="{
path: 'DeliveryDate',
type: 'sap.ui.model.type.Date',
formatOptions: {source: {pattern: 'timestamp'}}
}"/>
</template>
</Column>
</columns>
<footer>
<m:Toolbar>
<m:ToolbarSpacer/>
<m:Button
icon="sap-icon://hint"
tooltip="Show information"
press="showInfo"/>
</m:Toolbar>
</footer>
</Table>
</l:content>
</l:Grid>
我想在7上显示表单，在5上显示表格。 问题是，我做了defaultSpan = 7，甚至桌子也占据了这个位置并进入另一条线。
如果我做了6，这是在同一行，但所有字段的标签和文本不在同一行。
我该怎么做？ 我有两种可能性，但我不知道该怎么做。 1]将表格仅放在5个网格单元格上 2]将默认范围放在6上，并使表格标签与文本字段在同一行。
我的结果当defaultspan为7时：在两个级别上
但是，如果我穿上6，我有一个级别的表格和表格，但在2个级别的字段和标签形式：
感谢专家
1 个答案:
答案 0 :(得分：2)
网格有12列，每个控件将采用多少列由＆＃39; default_span＆＃39;提供。网格的属性。现在，根据您的代码，您正在告诉Grid（defaultSpan =＆＃34; L7 M7 S7＆＃34;） - 嘿，我希望每行上的每个控件都占用7列。所以这发生了：
- 您的表单占据了7列（第1行中的12列）。
- 您的表再次要求7列，但第1行只有5列。因此，它会给出一个包含7列的新行。
- 使用GridData告诉Form和表仅使用行的一部分（默认范围为12）
- 将defaultSpan更改为6.
- 根据Markus的建议，减少标签的宽度（如果解决方案1和2不起作用）。
所以，下面是我解决问题的方法：
我已实施解决方案1：以下是我的代码：（UI5版本：1.42.6）
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.ui.table" xmlns:m="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
xmlns:u="sap.ui.unified" controllerName="testbed.forth" xmlns:html="http://www.w3.org/1999/xhtml">
<l:Grid defaultSpan="L12 M12 S12" class="sapUiSmallMarginTop sapUiSmallMargin">
<l:content>
<f:SimpleForm id="SimpleFormChange472" maxContainerCols="2"
editable="true" layout="ResponsiveGridLayout" labelSpanL="3"
labelSpanM="3" emptySpanL="0" emptySpanM="0" columnsL="2" columnsM="2"
adjustLabelSpan="false" class="editableForm">
<f:layoutData>
<l:GridData span="L7 M7 S7" />
</f:layoutData>
<f:content>
<m:Label text="N. Document" />
<m:Input value="{SupplierName}">
<m:layoutData>
<l:GridData span="L3 M3 S3" />
</m:layoutData>
</m:Input>
<m:Label text="Date Document" />
<m:Input value="{Street}">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Label text="Date livraison" />
<m:DatePicker id="DP4"
value="{path:'/dateValue', type:'sap.ui.model.type.Date', formatOptions: { style: 'medium', strictParsing: true}}"
class="sapUiSmallMarginBottom">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:DatePicker>
<m:Label text="Commercial" />
<m:Select
items="{ path: 'ScreenModel>/commerciaux',
sorter: { path: 'long_name' }
}"
autoAdjustWidth="true">
<core:Item text="{ScreenModel>long_name}" key="{ScreenModel>id}" />
</m:Select>
<m:Label text="Magasin" />
<m:Select
items="{ path: 'ScreenModel>/store',
sorter: { path: 'code' }
}"
autoAdjustWidth="true">
<core:Item text="{ScreenModel>code} - {ScreenModel>description}"
key="{ScreenModel>id}" />
</m:Select>
<m:Label text="Client" />
<m:Input value="{SupplierName}" liveChange="onClient">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Label text="Street/No." />
<m:Input value="{Street}">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Input value="{HouseNumber}">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Label text="ZIP Code/City" />
<m:Input value="{ZIPCode}">
<m:layoutData>
<l:GridData span="L2 M2 S4" />
</m:layoutData>
</m:Input>
<m:Input value="{City}" />
<m:Label text="Country" />
<m:Select width="100%">
<m:items>
<core:Item text="Germany" />
<core:Item text="USA" />
<core:Item text="England" />
</m:items>
</m:Select>
</f:content>
</f:SimpleForm>
<Table id="table1" selectionMode="MultiToggle" rows="{/ProductCollection}"
visibleRowCount="7" showColumnVisibilityMenu="{ui>/showVisibilityMenuEntry}"
enableColumnFreeze="{ui>/showFreezeMenuEntry}" enableCellFilter="{ui>/enableCellFilter}"
columnSelect="onColumnSelect" cellContextmenu="onProductIdCellContextMenu"
ariaLabelledBy="title">
<layoutData>
<l:GridData span="L5 M5 S5" />
</layoutData>
<toolbar>
<m:Toolbar>
<m:Title id="title1" text="Products"></m:Title>
<m:ToolbarSpacer />
<m:ToggleButton icon="sap-icon://show"
tooltip="Enable / Disable Visibility Menu Entries" pressed="{ui>/showVisibilityMenuEntry}" />
<m:ToggleButton icon="sap-icon://resize-horizontal"
tooltip="Enable / Disable Freezing Menu Entries" pressed="{ui>/showFreezeMenuEntry}" />
<m:ToggleButton icon="sap-icon://grid" tooltip="Enable / Disable Cell Filter"
pressed="{ui>/enableCellFilter}" />
</m:Toolbar>
</toolbar>
<columns>
<Column id="name1" width="11rem" sortProperty="Name"
filterProperty="Name" showFilterMenuEntry="true"
showSortMenuEntry="true">
<m:Label text="Product Name" />
<template>
<m:Text text="{Name}" />
</template>
</Column>
<Column id="productId1" filterProperty="ProductId"
sortProperty="ProductId" width="11rem">
<m:Label text="Product Id" />
<template>
<m:Text text="{ProductId}" />
</template>
</Column>
<Column id="image1" width="9rem" columnMenuOpen="onColumnMenuOpen">
<m:Label text="Image" />
<template>
<m:Link text="Show Image" href="{ProductPicUrl}" target="_blank" />
</template>
</Column>
<Column id="quantity1" width="6rem" hAlign="End"
sortProperty="Quantity">
<m:Label text="Quantity" />
<template>
<m:Label
text="{
path: 'Quantity',
type: 'sap.ui.model.type.Integer'
}" />
</template>
<menu>
<u:Menu ariaLabelledBy="quantity">
<u:items>
<u:MenuItem text="My custom menu entry" select="onQuantityCustomItemSelect" />
<u:MenuItem text="Sort" select="onQuantitySort"
icon="sap-icon://sort" />
</u:items>
</u:Menu>
</menu>
</Column>
<Column width="9rem">
<m:Label text="Delivery Date" />
<template>
<m:Text
text="{
path: 'DeliveryDate',
type: 'sap.ui.model.type.Date',
formatOptions: {source: {pattern: 'timestamp'}}
}" />
</template>
</Column>
</columns>
<footer>
<m:Toolbar>
<m:ToolbarSpacer />
<m:Button icon="sap-icon://hint" tooltip="Show information"
press="showInfo" />
</m:Toolbar>
</footer>
</Table>
</l:content>
</l:Grid>
<!-- <l:Grid defaultSpan="L7 M7 S7" class="sapUiSmallMarginTop sapUiSmallMargin">
<m:Label text='Will be row 1' /> <m:Label text ='Will be row 2' /> </l:Grid> -->
</core:View>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？