sap.ui.table.Table 和 sap.ui.table.TreeTable 不显示最后一行数据
sap.ui.table.Table and sap.ui.table.TreeTable do not display the last data row
SAPUI5 版本 1.44.6 上出现以下错误。当我们将 sap.ui.table.Table
或 sap.ui.table.TreeTable
与 visibleRowCountMode="Auto"
一起使用时,在较低分辨率下向下滚动时不会显示最后一行数据。这些表格在 1920x1080 等较高分辨率下完美运行,但如果我将屏幕分辨率更改为 1366x768,例如,我无法向下滚动到最后一个数据行,但只能滚动到最后一个数据行。只有当我点击倒数第二行并按↓时,它才会显示最后一行数据。
我已经为此寻找解决方案,但没有找到任何解决方案!你们知道如何解决或避免这个问题吗?考虑到它们的显示区域,我需要这些表可以自动调整。提前致谢!
我们项目中的一个小视图示例(对不起,我无法重现可测试的版本):
<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>
我已经设法找到解决此问题的方法。看起来这个问题与 table 本身无关,而是与其滚动条有关。因此,每当用户执行加载 table 行(例如 expanding/collapsing )的操作时,我都会更改第一列的宽度以触发刷新滚动条可滚动区域的事件。我试图找到一种更好的方法来刷新滚动条而不必更改 table 本身,但找不到更好的方法。
代码示例 1:将事件附加到调用列调整大小函数的 table。
<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%");
}
}
}
SAPUI5 版本 1.44.6 上出现以下错误。当我们将 sap.ui.table.Table
或 sap.ui.table.TreeTable
与 visibleRowCountMode="Auto"
一起使用时,在较低分辨率下向下滚动时不会显示最后一行数据。这些表格在 1920x1080 等较高分辨率下完美运行,但如果我将屏幕分辨率更改为 1366x768,例如,我无法向下滚动到最后一个数据行,但只能滚动到最后一个数据行。只有当我点击倒数第二行并按↓时,它才会显示最后一行数据。
我已经为此寻找解决方案,但没有找到任何解决方案!你们知道如何解决或避免这个问题吗?考虑到它们的显示区域,我需要这些表可以自动调整。提前致谢!
我们项目中的一个小视图示例(对不起,我无法重现可测试的版本):
<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>
我已经设法找到解决此问题的方法。看起来这个问题与 table 本身无关,而是与其滚动条有关。因此,每当用户执行加载 table 行(例如 expanding/collapsing )的操作时,我都会更改第一列的宽度以触发刷新滚动条可滚动区域的事件。我试图找到一种更好的方法来刷新滚动条而不必更改 table 本身,但找不到更好的方法。
代码示例 1:将事件附加到调用列调整大小函数的 table。
<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%");
}
}
}