javascript - Sapui5 中的布局，带有表单和网格表

标签 javascript layout sapui5

我想在同一个水平布局上显示 Simpleform 和 Gridtable

这是我的 XML View :

<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 时的结果:在两个级别上

Not at the same level

但是如果我把 6 放在一级表单和表格上，但将表单字段和标签放在 2 级上:

Look at the label of the fiels

感谢专家

最佳答案

网格有 12 列，每个控件将占用多少列，由网格的“default_span”属性提供。现在，根据您的代码，您正在告诉 Grid (defaultSpan="L7 M7 S7") - 嘿，我希望每行上的每个控件占据 7 列。所以会发生这种情况:

  1. 您的表单占 7 列(第 1 行 12 列)。
  2. 您的表格再次要求 7 列，但第 1 行中只有 5 列。因此，它会被赋予一个包含 7 列的新行。

所以，以下是我对您的问题的解决方案:

  1. 使用 GridData 告诉 Form 和表格仅使用行的一部分(默认跨度为 12)
  2. 将 defaultSpan 更改为 6。
  3. 按照 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>

关于javascript - Sapui5 中的布局，带有表单和网格表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39433431/

上一篇：javascript - 如何在getcontenttools库中通过jquery发送ajax

下一篇：javascript - 将 Express 应用程序传递到路线文件

相关文章：

sapui5 - SAPUI5路由配置中 'controlAggregation'是什么意思？

unit-testing - 如何为 SAPUI5/OPENUI5 应用程序设置测试用例？

javascript - 将 Rails Javascript Assets 拆分为头部和主体？

Android - 如何使 UI 在不同设备上看起来相同？

android - GridLayout 内的 Spinner

android - 当 Activity 在android中启动时如何隐藏软键盘？

javascript - SAPUI5数据绑定(bind)获取更改事件中更改的值

javascript - 如何正确应对Chrome X-XSS-Protection？

javascript - 将 Javascript/HTML 表单功能添加到 COGNOS Report Studio v10 中的 'html item'

javascript - JSON.parse 适用于零元素数组 (node.js)

©2024 IT工具网  联系我们