scroll - 如何自动向下滚动到 sapUI5 中表格的最后一行？

Question

我需要使用动态值在我的表中实现更多加载。这是我的屏幕。

最初，我显示了来自 api 调用的值。那时我的表格应该会自动向下滚动到表格的最后一行。然后我再次单击 api 调用的加载更多按钮并在模型中添加新值并添加到表中。但它没有向下滚动到表格。这是我尝试向下滚动的控制器代码。

                  var oTableModel = new sap.ui.model.json.JSONModel();
                    oTableModel .setSizeLimit(TABLE_ARRAY.length);
                    oTableModel .setData({
                        oset: TABLE_ARRAY
                    });

                    that.getView().byId("oSmartTable").setModel(oTableModel);
                    //that.getView().byId("otable").getBinding("items").refresh();
                    var oTable = that.getView().byId("logtable");

                    var oLength = TABLE_ARRAY.length - 1;
                    //New Item that is added
                    var oItem = oTable.getItems()[oLength];

                    var oScroll = that.getView().byId("oscroll");
                    //Add Delay since the new item needs to be added to the HTML Doc
                    jQuery.sap.delayedCall(100, that, function () {
                        //Scroll to the newly added item
                        oScroll.scrollToElement(oItem);
                    });

这是智能表的 view.xml 代码

    <ScrollContainer id="oscroll" height="100%" width="99%" horizontal="false" vertical="true">
                                <VBox class="chartBackground" alignItems="Stretch" width="100%" id="logTableVB">
                                    <items>
                                        
                                        <smartTable:SmartTable id="oSmartTable" entitySet="oset" smartFilterId="smartFilterBar" tableType="ResponsiveTable"
                                            app:p13nDialogSettings="{sort:{items:[{ columnKey: 'Type', operation: 'Ascending' }]}}" useExportToExcel="false"
                                            beforeExport="onBeforeExport" useVariantManagement="true" useTablePersonalisation="true" showTablePersonalisation="true"
                                            header="Total Logs " showRowCount="true" showFullScreenButton="true" enableAutoBinding="true">
                                            <Table id="logtable" sticky="ColumnHeaders" class="headercolor" growingScrollToLoad="true" growing="true" growingThreshold="50">
                                                <!--firstVisibleRowChanged="scroll"-->
                                                <columns getResizable="true">
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="10%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c1_data", "filterProperty": "c1_data","columnKey": "Column 1", "leadingProperty" : "c1_data"}'/>
                                                        </customData>
                                                        <Text class="headercolor" text="Column 1"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="15%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c2_data", "filterProperty": "c2_data","columnKey": "Column 2", "leadingProperty" : "c2_data"}'/>
                                                        </customData>
                                                        <Text class="headercolor" text="Column 2"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="15%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c3_data", "filterProperty": "c3_data","columnKey": "Column 3", "leadingProperty" : "c3_data"}'/>
                                                        </customData>
                                                        <Text class="headercolor" text="Column 3"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="15%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c4_data", "filterProperty": "c4_data","columnKey": "Column 4", "leadingProperty" : "c4_data"}'/>
                                                        </customData>
                                                        <Text class="headercolor" text="Column 4"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true" width="15%">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c5_data", "filterProperty": "c5_data","columnKey": "Column 5", "leadingProperty" : "c5_data"}'/>
                                                        </customData>
                                                        <Text class="headercolor" text="Column 5"/>
                                                    </Column>
                                                    <Column minScreenWidth="Tablet" demandPopin="true">
                                                        <customData>
                                                            <core:CustomData key="p13nData"
                                                                value='\{"sortProperty": "c6_data", "filterProperty": "c6_data","columnKey": "Column 6", "leadingProperty" : "c6_data"}'/>
                                                        </customData>
                                                        <Text class="headercolor" text="Column6"/>
                                                    </Column>
                                                </columns>
                                                <items>
                                                    <ColumnListItem type="Active" press="onLogTableClick_">
                                                        <cells>
                                                            <Text class="tabletext" text="{c1_data}"/>
                                                            <Text class="tabletext" text="{c2_data}"/>
                                                            <Text class="tabletext" text="{c3_data}"/>
                                                            <Text class="tabletext" text="{c4_data}"/>
                                                            <Text class="tabletext" text="{c5_data}"/>
                                                            <Text class="tabletext" text="{c6_data}"/>
                                                        </cells>
                                                    </ColumnListItem>
                                                </items>
                                            </Table>
                                            <HBox>
                                                <items>
                                                    <HBox class="contactMarigin" width="100%" justifyContent="Start" alignItems="Center">
                                                        <items></items>
                                                    </HBox>
                                                    <HBox class="contactMarigin" width="100%" justifyContent="Center" alignItems="Center">
                                                        <items></items>
                                                    </HBox>
                                                    <HBox class="contactMarigin" width="100%" justifyContent="End" alignItems="Center">
                                                        <items>
                                                            <Button id="oload_more" text="Load More" class="pdfMarigin" />
                                                        </items>
                                                    </HBox>
                                                </items>
                                            </HBox>
                                        </smartTable:SmartTable>
                                    </items>
                                </VBox>
                            </ScrollContainer>

我已将智能表放在滚动容器中。当我单击加载更多按钮时，应自动向下滚动到最后一行。我怎样才能做到这一点？提前致谢。

标签： scrollmodelsapui5

Answer 1

setTimeout(function () {
    oScroll.scrollToElement(oTable.getItems()[oLength], 800);
}, 0);