sapui5 - 如何在 sapui5 的 sap.m.Table 中启用滚动？

Question

我已经实现了sap.m.Table，但是没有显示所有的记录。似乎也没有滚动选项。我通过了API建议使用 sap.m.ListBase 的 growth、growthThreshold、growthScrollToLoad。

这里 growth 将使表格控件能够加载更多项目，growthThreshold 将确定每次增长时从模型请求的项目数，getGrowingScrollToLoad 将使用户能够滚动浏览记录，而不是显示 more 按钮来加载更多数据。

但是，即使使用了这些属性，我的整个数据仍然没有被渲染，我可以看到更多按钮而不是滚动条。在 more 按钮下方，我可以看到一个数字，该数字决定了要呈现的全部记录数以及初始 View 中已呈现的记录数。

如果数据超过页面的限制，滚动不应该是默认选项吗？我很困惑。请帮忙。

我也经历过this邮政! :)

Answer 1

2019 年 3 月 8 日更新:

现在有一种新方法可以使用粘滞选项在 sap.m.Table 中启用滚动。 请检查 API 和示例以获取更多示例。推荐使用这种新方式，并且直接通过库提供支持和开发。

检查:https://sapui5.hana.ondemand.com/#/api/sap.m.ListBase/methods/setSticky

---

旧答案:

鉴于问题的设置非常精美，并提供以下选项:

1. sap.ui.table.Table : 带有固定 Header 的可滚动。
2. sap.m.Table:不断增长的列表，可滚动，没有固定的标题。

但很多时候我们需要一个sap.m.Table- 可滚动但带有静态标题，因此表格下方的内容不会进一步移动到下方。下面的代码将在此期间提供帮助。它有一个带有固定标题的可滚动正文。

设置:我正在使用两个 sap.m.Table 实例，一个仅带有标题，另一个仅用于数据。另外，我正在使用一个可滚动的容器，它包含第二个表格(没有标题)。由于 Scrollable 容器的固定宽度，我们看到了一个滚动条。下面提供了虚拟代码:

View.xml:

<Table showNoData='false'>
            <columns>
                <Column>
                    <header>
                        <Text text='ID' />
                    </header>
                </Column>
                <Column>
                    <header>
                        <Text text='First Name' />
                    </header>
                </Column>
                <Column>
                    <header>
                        <Text text='Last Name'  />
                    </header>
                </Column>
                <Column>
                    <header>
                        <Text text='Gender' />
                    </header>
                </Column>
            </columns>
        </Table>
        <ScrollContainer height='20rem' vertical='true'> <!-- To have fixed with and enable vertical scrolling of data table -->
        <!-- Table to hold data, data ,data -->
            <Table class='tableHdr' items='{/}'> <!--  CSS class to hide the column header, otherwise we will have 2 headers. -->
                <columns>
                <!-- Dont need columns header, as upper table has already defined them. -->
                    <Column >
                    </Column>
                    <Column >
                    </Column>
                    <Column >
                    </Column>
                    <Column >
                    </Column>
                </columns>
                <items>
                    <ColumnListItem>
                        <cells>
                            <Text text='{id}' />
                            <Text text='{first_name}' />
                            <Text text='{last_name}' />
                            <Text text='{gender}' />

                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </ScrollContainer>

现在，如果您在没有以下样式类的情况下执行上述代码，您将得到来自 2 个表的 2 个列标题。因此，要删除第二列标题，我使用了以下类:

.tableHdr .sapMListTblHeaderCell {
            padding: 0rem;
}

想听听对此的反馈。