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

Tee*_*Tee 3 sapui5 sap.m

我已经实现了,sap.m.Table但是没有显示所有记录。似乎也没有滚动选项。我所经历的API这表明利用growinggrowingThresholdgrowingScrollToLoadsap.m.ListBase

这里的增长将使表控件能够加载更多的项目,growingThreshold将确定每次增长从模型中请求的项目数,getGrowingScrollToLoad并使用户能够滚动记录,而不是显示更多按钮来加载更多的数据。

但是,即使使用了这些属性后,我的整个数据仍然没有得到渲染,我可以看到更多的按钮而不是滚动条。在更多按钮下方,我可以看到一个数字,该数字确定了要呈现的记录的总数以及在初始视图中呈现的记录的数量。

如果数据超出页面限制,是否应该将滚动作为默认选项?我很困惑 请帮忙。

我也确实经历了这篇文章!:)

Rah*_*waj 6

更新2019年3月8日:

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

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


旧答案:

考虑到如何很好地设置问题,可以使用以下选项:

  1. sap.ui.table.Table :可滚动,带有固定页眉。
  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>
Run Code Online (Sandbox Code Playgroud)

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

.tableHdr .sapMListTblHeaderCell {
            padding: 0rem;
}
Run Code Online (Sandbox Code Playgroud)

想听听对此的反馈。