sap.ui.table.Table和sap.ui.table.TreeTable在较低分辨率下不显示最后一个数据行

问题描述 投票:0回答:1

以下错误在SAPUI5版本1.44.6上发生。当我们使用sap.ui.table.Table或sap.ui.table.TreeTable并将visibleRowCountMode设置为Auto时,在较低分辨率下向下滚动时将不显示最后一个数据行。这些表格可以在较高的分辨率(例如1920x1080)上正常工作,但是例如,如果将屏幕分辨率更改为1366x768,则无法向下滚动到最后一个数据行,而只能向下滚动到最后一个数据行。仅当我单击倒数第二行并按“向下”键时,它才会显示最后一个数据行。

我还在最新版本的SAPUI5 1.44(版本1.44.45)中测试了此问题,并且仍然存在。

我一直在寻找解决方案,但在任何地方都找不到!你们对如何解决或避免此问题有任何想法吗?考虑到它们的显示区域,我需要这些表可以自动调整。预先感谢!

我们项目中的一个小视图样本(抱歉,我无法复制可测试的版本:]

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE project>
<core:FragmentDefinition xmlns="sap.m" 
    xmlns:l="sap.ui.layout" 
    xmlns:f="sap.ui.layout.form" 
    xmlns:t="sap.ui.table" 
    xmlns:core="sap.ui.core" 
    xmlns:html="http://www.w3.org/1999/xhtml">
    <Dialog id="AllocationDayDialog" title="{i18n>Allocations}">
        <buttons>
            <Button id="closeButton" text="{i18n>Close}" press="onClose"/>
        </buttons>
        <IconTabBar expandable="false" class="siggaTab" stretchContentHeight="true">
            <items>
                <IconTabFilter text="{i18n>Person}">
                    <Panel height="100%">
                        <t:TreeTable id="personTreeTableId" class="siggaTableSpace container leftTable" selectionMode="None" selectionBehavior="Row" enableColumnReordering="false" expandFirstLevel="false" collapseRecursive="false" enableSelectAll="true" rows="{path : 'PersonNodesModel>/results', parameters : { arrayNames:['children'] }}" visibleRowCountMode="Auto">
                            <t:toolbar>
                                <Toolbar>
                                    <Button icon="sap-icon://expand-group" tooltip="{i18n>ExpandAll}" press="onPressExpandAll" />
                                    <Button icon="sap-icon://collapse-group" tooltip="{i18n>CollapseAll}" press="onPressCollapseAll" />
                                    <SearchField search="onFilterPersonGlobally" value="{ui>/globalFilter}"/>
                                    <Button icon="sap-icon://pdf-attachment" tooltip="{i18n>Export_pdf}" press="onGetPdfPerson" />
                                </Toolbar>
                            </t:toolbar>
                            <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>
    </Dialog>
</core:FragmentDefinition>
sapui5 sap
1个回答
0
投票

我设法找到了解决此问题的方法。看来问题与表格本身无关,但与表格滚动条有关。因此,每次用户执行加载表行的操作(例如,展开/折叠)时,我都会更改第一列的宽度,以触发刷新滚动条可滚动区域的事件。我尝试找到一种无需滚动表即可刷新滚动条的更好方法,但是找不到更好的方法。

代码示例1:将事件附加到调用列调整大小函数的表上。

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

代码示例2:列调整大小功能。

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%");
            }
        }
    }
© www.soinside.com 2019 - 2024. All rights reserved.