带有多列的表格？
我定义了以下简单形式：
<form:SimpleForm id="SimpleFormChange354"
editable="true"
layout="ResponsiveGridLayout"
title="Address"
labelSpanXL="2"
labelSpanL="2"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsXL="2"
columnsL="2"
columnsM="1"
singleContainerFullSize="false"
>
<Label text="Name1"/>
<Input/>
<Label text="Name2"/>
<Input/>
<Label text="Name3"/>
<Input/>
</form:SimpleForm>
如你看到的：
如何将红色标记的元素放置在Name1元素旁边？
为了启用多列，应分别在（Simple）Form中调整属性column*或<layoutData>聚合。
使用 ResponsiveGridLayout
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:form="sap.ui.layout.form"
xmlns:layout="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns="sap.m"
>
<form:SimpleForm title="Multiple Columns via GridData"
editable="true"
layout="ResponsiveGridLayout"
>
<Label text="Label 1">
<layoutData>
<layout:GridData span="L2 M2" />
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4" />
</layoutData>
</Input>
<Label text="Label 2">
<layoutData>
<layout:GridData span="L2 M2" />
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4" />
</layoutData>
</Input>
<Label text="Label 3">
<layoutData>
<layout:GridData span="L2 M2" />
</layoutData>
</Label>
<Input>
<layoutData>
<layout:GridData span="L4 M4" />
</layoutData>
</Input>
</form:SimpleForm>
<form:SimpleForm title="Multiple Columns via Containers (columns* + sap.ui.core.Title)"
editable="true"
layout="ResponsiveGridLayout"
columnsM="2"
>
<core:Title text="Container 1" />
<Label text="Label 1" />
<Input />
<core:Title text="Container 2" />
<Label text="Label 2" />
<Input />
<Label text="Label 3" />
<Input />
</form:SimpleForm>
</mvc:View>`
}).then(view => view.placeAt("content"))));<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
data-sap-ui-preload="async"
data-sap-ui-async="true"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>资源资源
使用 ColumnLayout
从v1.56开始，sap.ui.layout.form.ColumnLayout可以将新布局分配给（Simple）Form，从而启用“类似报纸的样式”，而无需插入任何标题，工具栏或任何其他布局数据以具有多列。
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:form="sap.ui.layout.form"
xmlns="sap.m"
>
<form:SimpleForm title="Multiple Columns via ColumnLayout"
editable="true"
layout="ColumnLayout"
columnsM="2"
>
<Label text="Label 1" />
<Input />
<Label text="Label 2" />
<Input />
<Label text="Label 3" />
<Input />
</form:SimpleForm>
</mvc:View>`
}).then(view => view.placeAt("content"))));<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
data-sap-ui-preload="async"
data-sap-ui-async="true"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
data-sap-ui-xx-xml-processing="edge"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>如果需要更多调整，则可以分配布局数据sap.ui.layout.form.ColumnElementDataAPI。例如：
<Label text="Label 3">
<layoutData>
<form:ColumnElementData cellsSmall="3" /> <!-- default: 12 -->
</layoutData>
</Label>
资源资源
- ColumnLayout API参考
- ColumnLayout的测试页（可在此处找到源代码）
| 归档时间： |
|
| 查看次数： |
2877 次 |
| 最近记录： |