sap.ui.table.Table and sap.ui.table.TreeTable do not display the last data row

问题

The following bug occurs on SAPUI5 version 1.44.6. When we use a sap.ui.table.Table or a sap.ui.table.TreeTable with visibleRowCountMode="Auto", the last data row is not displayed when scrolling down on lower resolutions. The tables work perfectly on higher resolutions, such as 1920x1080, but if I change my screen resolution to 1366x768, for example, I'm not able to scroll down to the last data row but only to the last but one. Only if I click on the penultimate row and press ↓, it displays the last data row.

I have looked for solutions for this but didn't find any anywhere! Do you guys have any idea on how to fix this problem or to avoid it? I need these tables to be auto adjustable considering their display area. Thanks in advance!

A small view sample from our project (I can't reproduce a testable version, sorry):

<Dialog id="AllocationDayDialog"
  xmlns="sap.m"
  xmlns:l="sap.ui.layout"
  xmlns:f="sap.ui.layout.form"
  xmlns:t="sap.ui.table"
  xmlns:core="sap.ui.core"
  title="{i18n>Allocations}"
>
  <IconTabBar expandable="false" stretchContentHeight="true">
    <items>
      <IconTabFilter text="{i18n>Person}">
        <Panel height="100%">
          <t:TreeTable id="personTreeTableId"
            selectionMode="None"
            selectionBehavior="Row"
            enableColumnReordering="false"
            expandFirstLevel="false"
            collapseRecursive="false"
            enableSelectAll="true"
            visibleRowCountMode="Auto"
            rows="{
              path: 'PersonNodesModel>/results',
              parameters: {
                arrayNames: [ 'children' ]
              }
            }"
          >
            <t:columns>
              <t:Column width="30%">
                <Label text="{i18n>Maintainer} - {i18n>Order}/{i18n>Description}" />
                <t:template>
                  <Text text="{PersonNodesModel>Maintainer}{PersonNodesModel>Order} {PersonNodesModel>OrderDescription}" />
                </t:template>
              </t:Column>
              <t:Column width="10%">
                <Label text="{i18n>WorkCenter}" />
                <t:template>
                  <Text text="{PersonNodesModel>WorkCenter}" />
                </t:template>
              </t:Column>
            </t:columns>
          </t:TreeTable>
        </Panel>
      </IconTabFilter>
    </items>
  </IconTabBar>
  <buttons>
    <Button id="closeButton" text="{i18n>Close}" press=".onClose"/>
  </buttons>
</Dialog>

回答1:

I've managed to find a workaround for this problem. It looks like the issue is not related to table itself, but to its scrollbar. So everytime the user does something that loads table rows (expanding/collapsing for example), I change the width of the first column in order to trigger a event that refreshes the scrollable area of the scrollbar. I tried finding a better way to refresh the scrollbar without having to change the table itself, but couldn't find a better way.

Code sample 1: Attached a event to the table that calls the column resize function.

<t:TreeTable id="workCenterTreeTableId" selectionMode="None" enableColumnReordering="false" expandFirstLevel="false" collapseRecursive="false" enableSelectAll="true" rows="{path : 'WorkCenterNodesModel>/results', parameters : { arrayNames:['children'] }}" visibleRowCountMode="Auto" toggleOpenState="onToggleOpenState">

Code sample 2: Column resize function.

onToggleOpenState() {
    this._fixTableScrollbarPosition();
}

_fixTableScrollbarPosition() {
        let treeTable = this.getFragmentById("personTreeTableId");
        if (treeTable) {
            if (treeTable.getColumns()[0].getWidth() === "30%") {
                treeTable.getColumns()[0].setWidth("29%");
            } else {
                treeTable.getColumns()[0].setWidth("30%");
            }
        }
        treeTable = this.getFragmentById("workCenterTreeTableId");
        if (treeTable) {
            if (treeTable.getColumns()[0].getWidth() === "30%") {
                treeTable.getColumns()[0].setWidth("29%");
            } else {
                treeTable.getColumns()[0].setWidth("30%");
            }
        }
    }

来源：https://stackoverflow.com/questions/58243034/sap-ui-table-table-and-sap-ui-table-treetable-do-not-display-the-last-data-row

标签

sapui5