sap.ui.table.Table:visibleRowCountMode=“自动"不使用 VBox (FlexBox) [英] sap.ui.table.Table: visibleRowCountMode="Auto" not working with VBox (FlexBox)

查看：20
本文介绍了sap.ui.table.Table:visibleRowCountMode=“自动"不使用 VBox (FlexBox)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我的表格被深深地嵌套在几个 Page 和 FlexBox 中，但这就是我的视图的样子.

<layout:Splitter id="CSL_idSplitter";高度=100%"resize=.onSplitterResize"><VBox高度=100%"><HBox justifyContent="SpaceBetween";高度＝100％"><VBox高度=100%"><table:Table id="idTable"可见行计数模式=自动"/><按钮/></VBox></HBox></VBox></layout:Splitter></VBox>

我也将它添加到我的 CSS 文件中:

html, body {高度:100%；}

根据其他问题，这似乎是解决方案，但对我不起作用.我发现，在 DOM 中，表控件(由 UI5 自动创建，似乎不属于视图中声明的任何元素)的直接父级

是问题是因为它没有样式 height: 100%.

这是来自 Chrome Dev-Tools 的 DOM(黄色是我的桌子，红色是没有任何高度的 div):

如果我手动为元素添加高度，visibleRowCountMode=Auto" 工作正常.

所以我找到了一个非常丑陋的解决方法，我希望任何人都知道一个更好的方法来克服这个问题.加载 View 后，我选择表的父

元素并在控制器的 onAfterRendering 中以编程方式设置其高度.

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

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

解决方案

带有 "Auto" 的属性 visibleRowCountMode 要求表格在渲染时允许增长在 FlexBox (VBox) 内.这可以通过 <FlexItemData growFactor 实现=1"/> 作为表的附加布局数据:

<VBox fitContainer="true"><!-- 或高度=100%"；--><table:Table visibleRowCountMode="Auto"><表格:布局数据><!-- 每个控件都有聚合`layoutData` --><FlexItemData growFactor="1"/><!-- 参见`sap.m.FlexItemData`的API ref --></table:layoutData><表:列><!-- ... --></table:columns></table:Table><按钮/><!-- 其他弹性框项目--></VBox><!-- ... -->

来自visibleRowCountMode="Auto" 的 API 参考:

<块引用>
  • 表格必须在其父 DOM 元素中没有兄弟元素的情况下呈现.唯一的例外是父元素是一个 CSS flex 容器，而表格是一个 CSS flex 项目，允许增长和缩小.

这是一个小演示:

sap.ui.getCore().attachInit(() => sap.ui.require(["sap/ui/core/fragment","sap/ui/model/json/JSONModel",//示例模型], async (Fragment, Model) =>{严格使用"；const control = await Fragment.load({定义:`<VBox xmlns="sap.m" fitContainer="true" renderType="Bare"><table:Table xmlns:table="sap.ui.table"visibleRowCountMode="自动"class="sapUiSizeCondensed"minAutoRowCount="2"columnHeaderVisible="false"><表格:布局数据><FlexItemData id="flexItemData" growFactor="2"/></table:layoutData><表格:页脚><ToggleButton text="Toggle Grow Factor" press="onMyTogglePress" type="Transparent"/></table:footer></table:Table></VBox>`});control.placeAt("内容");}));函数 onMyTogglePress(event) {const press = event.getParameter("pressed");const flexItemData = sap.ui.getCore().byId("flexItemData");flexItemData.setGrowFactor(pressed ? 0 : 1);}

html, body {高度:100%；}

<script id="sap-ui-bootstrap"src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.unified"data-sap-ui-theme="sap_fiori_3"数据-sap-ui-async="true"data-sap-ui-compatversion="edge"data-sap-ui-excludejquerycompat="true"data-sap-ui-resourceroots='{演示":./"}'data-sap-ui-xx-waitfortheme="init"></脚本><body id="content" class="sapUiBody sapUiSizeCompact"></body>

点击运行代码片段，然后点击Full Page"可以看到表格自动调整高度.

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

I would like the number rows of my sap.ui.table.Table to fit the screen height. I tried using visibleRowCountMode="Auto" for that but in the beginning, it did not work because certain parent elements did not have a height="100%".

My table is nested quite deeply into several Pages and FlexBoxes but this is kind of how my views look.

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

I also added this to my CSS file:

html, body {
  height: 100%;
}

According to other questions, this seemed to be the solution but it did not work for me. I found out that, in the DOM, the direct parent <div> of the table-control (which is automatically created by UI5 and does not seem to belong to any element declared in the view) was the problem because it did not have a style height: 100%.

Here is the DOM from the Chrome Dev-Tools (Yellow is my table and in red is the div without any height):

If I add the height to the element manually, the visibleRowCountMode="Auto" works fine.

So I found a quite ugly workaround and I was hoping that anyone would know a nicer way to overcome this issue. When the View is loaded, I select the parent <div> element of the table and set its height programmatically in onAfterRendering of the controller.

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

Since this is just a workaround, I was wondering where the real problem was lying and if anyone could help me solve it.

解决方案

The property visibleRowCountMode with "Auto" requires that the table is allowed to grow if it's rendered within a FlexBox (VBox). This can be achieved with <FlexItemData growFactor="1" /> as additional layout data to the table:

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

From the API reference for visibleRowCountMode="Auto":

  • The table must be rendered without siblings in its parent DOM element. The only exception is if the parent element is a CSS flex container, and the table is a CSS flex item allowed to grow and shrink.

Here is a little demo:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/ui/model/json/JSONModel", // sample model
], async (Fragment, Model) => {
  "use strict";
  
  const control = await Fragment.load({
    definition: `<VBox xmlns="sap.m" fitContainer="true" renderType="Bare">
      <table:Table xmlns:table="sap.ui.table"
        visibleRowCountMode="Auto"
        class="sapUiSizeCondensed"
        minAutoRowCount="2"
        columnHeaderVisible="false">
        <table:layoutData>
          <FlexItemData id="flexItemData" growFactor="2"/>
        </table:layoutData>
        <table:footer>
          <ToggleButton text="Toggle Grow Factor" press="onMyTogglePress" type="Transparent" />
        </table:footer>
      </table:Table>
    </VBox>`
  });
  
  control.placeAt("content");
}));

function onMyTogglePress(event) {
  const pressed = event.getParameter("pressed");
  const flexItemData = sap.ui.getCore().byId("flexItemData");
  flexItemData.setGrowFactor(pressed ? 0 : 1);
}

html, body {
  height: 100%;
}

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.table,sap.ui.unified"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-resourceroots='{ "demo": "./" }'
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

Click Run Code Snippet and then "Full Page" to see the table adjusting its height automatically.

To learn more about flex-grow, take a look at Understanding flex-grow, flex-shrink, and flex-basis.

这篇关于sap.ui.table.Table:visibleRowCountMode=“自动"不使用 VBox (FlexBox)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆