Scroll 如何在sapUI5中自动向下滚动到表格的最后一行?
我需要使用动态值在表中实现更多的加载。这是我的屏幕 最初,我显示了api调用中的值。此时,我的表格将自动向下滚动到表格的最后一行。然后,我再次单击loadmore按钮来调用api,并在模型中添加新值,并将其添加到表中。但它不会向下滚动到表中。这是我尝试向下滚动的控制器代码Scroll 如何在sapUI5中自动向下滚动到表格的最后一行?,scroll,model,sapui5,Scroll,Model,Sapui5,我需要使用动态值在表中实现更多的加载。这是我的屏幕 最初,我显示了api调用中的值。此时,我的表格将自动向下滚动到表格的最后一行。然后,我再次单击loadmore按钮来调用api,并在模型中添加新值,并将其添加到表中。但它不会向下滚动到表中。这是我尝试向下滚动的控制器代码 var oTableModel = new sap.ui.model.json.JSONModel(); oTableModel .setSizeL
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>
我已经把我的智能表放在滚动容器中了。单击“加载更多”按钮时,应自动向下滚动到最后一行。我怎样才能做到这一点?提前感谢。欢迎来到StackOverflow。感谢您抽出时间提供答案。虽然这段代码可以解决这个问题,但如何以及为什么解决这个问题将真正有助于提高您的帖子质量,并可能导致更多的投票。请记住,你是在将来回答读者的问题,而不仅仅是现在提问的人。请在回答中添加解释,并说明适用的限制和假设。
setTimeout(function () {
oScroll.scrollToElement(oTable.getItems()[oLength], 800);
}, 0);