How to enable scrolling in sap.m.Table in sapui5?

问题

I have implemented sap.m.Table but all the records are not displayed. Also there seems to be no option for scrolling. I went through the API which suggests using growing, growingThreshold, growingScrollToLoad of sap.m.ListBase.

Here growing would enable the table control to load more items, growingThreshold would determine the number of items to be requested from the model for each grow and getGrowingScrollToLoad would enable the user to scroll through the records instead of a more button being displayed to load more data.

However, even after using these properties my entire data is still not getting rendered and I can see that more button instead of scroll bar. Below the more button I am able to see a number that determines the entire number of records to be rendered as well and the number of records that have been rendered in the initial view.

Shouldn't scrolling be a default option if the data exceeds a page's limit? I'm very confused. Please help.

Also I did go through this post! :)

回答1:

Update 8-March-2019 :

There is now a new way to enable scrolling in sap.m.Table with sticky option. Kindly check the API and samples for more example. This new way is recommended and support and development is provided directly via the library.

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

Old Answer:

Given how the question is beautifully setup, with options:

sap.ui.table.Table : scrollable with fixed Header.
sap.m.Table: growing list, scrollable WITHOUT fixed header.

But many a times we need a sap.m.Table- scrollable but with static header, so the content below the table does not move further below. This below code will help during that time. It has a scrollable body with fixed header.

Setup: I'm using two sap.m.Table instances, one just with header and other just for data. Also, I'm using a scrollable container, which holds the 2nd table (without the header). Because of the fixed width of Scrollable container, we see a scrollbar. Dummy code is provided below:

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>

Now, If you execute the above code without this below style class, you will end up with 2 columns headers from 2 tables. So, to remove the 2nd Column header, I used the below class:

.tableHdr .sapMListTblHeaderCell {
            padding: 0rem;
}

Would like to hear the feedback on this.

回答2:

By default, if there are more rows in sap.m.Table, scrolling will be there. You can see the working example here

But if you want to force to fixed rows visibility, you can use sap.ui.table.Table with the properties visibleRowCount and minAutoRowCount.

Also note that if the vertical scrollbar is not visible for sap.m.Table, check if some other css is overriding the style. Else you can paste the code in the question with full ui code.

来源：https://stackoverflow.com/questions/40994068/how-to-enable-scrolling-in-sap-m-table-in-sapui5

标签

sapui5

sap.m