有多列的表单？

时间：2018-05-07 14:46:41

标签： sapui5

我定义了以下简单形式：

<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>

如你所见：

enter image description here

如何将红色标记的元素放在 Name1 元素旁边？

1 个答案:

答案 0 :(得分：4)

为了启用多个列，属性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

As of v1.56，新的布局sap.ui.layout.form.ColumnLayout可以分配到（简单）表格，可以启用“类似报纸的样式”，而无需插入任何标题，工具栏或任何其他布局数据多列。

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.ColumnElementData API 。 E.g：

<Label text="Label 3">
  <layoutData>
    <form:ColumnElementData cellsSmall="3" /> <!-- default: 12 -->
  </layoutData>
</Label>

资源

相关问题
最新问题