Javascript 带表格和网格表的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>

</mvc:View>

我想在7号显示表格，在5号显示表格。 问题是，我所做的是defaultSpan=7，甚至表格也在这个位置，并在另一行出现

如果我做了6，这在同一行，但标签和所有字段的文本不在同一行

我该怎么做呢。 我有两种可能，但我不知道怎么做。 1] 将表格仅放在5个网格单元上 2] 将默认范围设置为6，并使表单标签与文本字段位于同一行

我在两个级别上的默认值范围为7时的结果

但如果我把6放在一个级别的表单和表格上，但在表单中，字段和标签分为两个级别：

---

感谢专家们，网格有12列，每个控件的列数由网格的“default_span”属性提供。现在，根据您的代码，您正在告诉Grid（defaultSpan=“L7 M7 S7”）-嘿，我希望每行上的每个控件都包含7列。所以发生了这样的情况：

您的表单包含7列（第1行中的12列）

您的表再次要求7列，但第1行中只有5列。因此，它被赋予一个包含7列的新行

因此，以下是我对您问题的解决方案：

使用GridData告诉表单和表仅使用行的一部分（默认范围为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>