sap.ui.table.Table：visibleRowCountMode =“Auto”不适用于VBox（FlexBox）

问题描述 投票：0回答：3

我希望我的 

sap.ui.table.Table
的行数适合屏幕高度。我尝试使用 
visibleRowCountMode="Auto"
来实现这一点，但一开始它不起作用，因为某些父元素没有 
height="100%"
。

我的桌子深深地嵌套在几个 

Page
和 
FlexBox
中，但这就是我的视图的样子。

<VBox height="100%" class="sapUiTinyMarginBegin">
  <layout:Splitter id="CSL_idSplitter" height="100%" resize=".onSplitterResize">
    <VBox height="100%">
      <HBox justifyContent="SpaceBetween" height="100%">
        <VBox height="100%">
          <table:Table id="idTable" visibleRowCountMode="Auto" />
          <Button />
        </VBox>
      </HBox>
    </VBox>
  </layout:Splitter>
</VBox>

我还将其添加到我的 CSS 文件中：

html, body {
  height: 100%;
}

根据其他问题，这似乎是解决方案，但对我来说不起作用。我发现，在 DOM 中，表控件的直接父级 

<div>
（由 UI5 自动创建，似乎不属于视图中声明的任何元素）是问题所在，因为它没有风格
height: 100%
.

这是来自 Chrome 开发工具的 DOM（黄色是我的表格，红色是没有任何高度的 div）：

如果我手动添加元素的高度，

visibleRowCountMode="Auto"
工作正常。

所以我找到了一个相当丑陋的解决方法，我希望任何人都知道更好的方法来克服这个问题。加载 

View
后，我选择表格的父 
<div>
元素，并在控制器的 
onAfterRendering
中以编程方式设置其高度。

onAfterRendering: function() {
  const oTable = this.byId("idTable");
  const oHTMLElement = document.getElementById(oTable.getIdForLabel());
  oHTMLElement.parentNode.style.height = "100%";  
}

由于这只是一种解决方法，我想知道真正的问题出在哪里以及是否有人可以帮助我解决它。

css sapui5
3个回答
1
投票

带有 

visibleRowCountMode
的属性 
"Auto"
要求如果表格在 FlexBox（例如 
sap.m.VBox
）控件中呈现，则允许表格增长。这可以通过 
<FlexItemData growFactor="1" />
作为表格的附加 布局数据 来实现：

<!-- ... -->
  <VBox fitContainer="true"> <!-- or height="100%" -->
    <table:Table visibleRowCountMode="Auto">
      <table:layoutData> <!-- Every control has the aggregation `layoutData` -->
        <FlexItemData growFactor="1"/> <!-- See API ref of `sap.m.FlexItemData` -->
      </table:layoutData>
      <table:columns>
        <!-- ... -->
      </table:columns>
    </table:Table>
    <Button /> <!-- Other flex box items -->
  </VBox>
<!-- ... -->

来自 API 参考 

visibleRowCountMode="Auto"
：

  • 该表必须在其父 DOM 元素中没有同级元素的情况下呈现。唯一的例外是如果父元素是 CSS Flex 容器，并且表格是允许增长和收缩的 CSS Flex 项目。

这是一个小演示：

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/core/mvc/Controller",
], async (XMLView, Controller) => {
  "use strict";
  
  const control = await XMLView.create({
    definition: `<mvc:View controllerName="my.demo.Controller"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m"
      xmlns:table="sap.ui.table"
      displayBlock="true"
      height="100%"
    >
      <App xmlns="sap.m" autoFocus="false">
        <Page showHeader="false">
          <VBox xmlns="sap.m" fitContainer="true" renderType="Bare">
            <table:Table xmlns:table="sap.ui.table"
              class="sapUiSizeCondensed"
              visibleRowCountMode="Auto"
              minAutoRowCount="2"
              columnHeaderVisible="false"
            >
              <table:layoutData>
                <FlexItemData id="myFlexItemData" growFactor="2"/>
              </table:layoutData>
              <table:footer>
                <ToggleButton
                  text="Toggle Grow Factor"
                  type="Emphasized"
                  press=".onMyTogglePress"
                />
              </table:footer>
            </table:Table>
          </VBox>
        </Page>
      </App>
    </mvc:View>`,
    controller: new (Controller.extend("my.demo.Controller", {
      onMyTogglePress: function(event) {
        const pressed = event.getParameter("pressed");
        const flexItemData = this.byId("myFlexItemData");
        flexItemData.setGrowFactor(pressed ? 0 : 1);
      },
    }))(),
  });

  control.placeAt("content");
});
<script id="sap-ui-bootstrap"
  src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.layout,sap.ui.unified"
  data-sap-ui-async="true"
  data-sap-ui-oninit="onUI5Init"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-resourceroots='{ "my.demo": "./" }'
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

单击 运行代码片段，然后单击“整页”以查看表格自动调整其高度。

要了解有关 flex-grow 的更多信息，请查看 了解 flex-grow、flex-shrink 和 flex-basis。

1
投票

这是一个工作示例：嵌套框中的表格 我还包含了 

Text
元素，因此您可能会看到应如何应用样式，具体取决于每个框有多少个子元素。

最主要的是，在创建 VBox/HBox 时，默认情况下它将 UI 控件包装在另一个 

div
元素内。因此，不仅 Box 元素必须将其高度设置为 100%，而且该 box 元素的“item”也必须设置为 100%。

其他选项是更改属性

renderType="Bare"
，然后再次使用样式。 https://sapui5.hana.ondemand.com/#/api/sap.m.FlexRendertype

附注抱歉我的造型（仍在学习 stackoverflow）

<mvc:View
   controllerName="sap.ui.sample.App"
   xmlns="sap.m"
   xmlns:l="sap.ui.layout"
   xmlns:core="sap.ui.core"
   xmlns:mvc="sap.ui.core.mvc"
   xmlns:table="sap.ui.table">
   <App>
      <Page>
         <content>
            <VBox class="sapUiTinyMarginBegin VBOX3">            
               <l:Splitter id="CSL_idSplitter" height="100%" resize="onSplitterResize">
                  <VBox class="VBox2">
                     <HBox justifyContent="SpaceBetween" class="HBox1">
                        <VBox class="VBOX1">
                           <table:Table 
                              id="idTable"
                              height="100%"
                              visibleRowCountMode="Auto"
                              fixedBottomRowCount="1"/>
                        </VBox>
                     </HBox>
                  </VBox>
               </l:Splitter>
               <Text text="Hello"/>            
            </VBox>
         </content>
      </Page>
   </App>
</mvc:View>

.VBOX3{
  height: 100% 
}

.VBOX3 div:first-of-type{
  height: 100% 
}

.VBox2{
    height:100%
}

.HBox1{
    height: 100%
}

.VBOX1{
  height: 100% 
}

.VBOX1 > div{
  height: 100% 
}
1
投票

尝试将 

renderType="Bare"
添加到所有相关的 FlexBox。来自 API 参考：

renderType

确定布局是呈现为一系列 div 还是无序列表 (ul)。

我们建议在大多数情况下使用

Bare
，以避免由于浏览器不一致而导致的布局问题。

还有

Bare

UI5 控件没有包装在额外的 HTML 元素中。

即表格的父级应该是 100% 高度的 VBox 元素，中间没有 div 元素。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.