PrimeFaces dataTable滚动条在所需位置 [英] PrimeFaces dataTable scrollbar at desired position
问题描述
当我添加一条新记录(在默认的可见区域之外)并更新从记录0加载数据表的数据表时,我有一个包含100多个记录的可滚动数据表,而我需要在前一个位置查看数据表.
I have a scrollable dataTable with 100+ records when I add a new record (outside the default viewable area)and update the datatable the dataTable gets loaded from record 0, whereas I need datatable view at the previous position.
我的数据表代码
<p:dataTable id="DataTable" value="#{dtMB.selectDataModel}" var="test" scrollable="TRUE" scrollHeight="500" styleClass="day-column2" selectionMode="single" >
<ui:insert name="TableInsert" >
<ui:include src="test.xhtml" />
</ui:insert>
</p:dataTable>
用于更新数据表的命令按钮(在对话框中)
Command Button (inside a dialog) which updates the Datatable
<p:commandButton id="saveNew" value="Save" type="submit" process="@parent" onsuccess="addNew.hide()" action="#{dtMB.addNew()}" update=":FORM:usrMsg :FORM:TABView:DataTable"/>
当前,我需要回滚到第n条记录,以查看添加的内容或进行任何更新等. primeface数据表中是否有任何选项,或者我需要为此编写一个JavaScript.
currently I need to scroll back to the n'th record to see what was added or do any updates etc. Is there any option in primeface datatable, or I need to write a javascript for the same.
推荐答案
我使用以下帖子完成了上述操作
I did the above using the following post
我的代码
脚本
function saveScrollPos() {
var scrollPos = jQuery('#receptionFORM\\:receptionTV\\:scheduleDataTable .ui-datatable-scrollable-body').prop('scrollTop');
document.getElementById('receptionFORM:scrollPos').value = scrollPos;
}
function autoScroll() {
var scrollPos = document.getElementById('receptionFORM:scrollPos').value;
jQuery('#receptionFORM\\:receptionTV\\:scheduleDataTable .ui-datatable-scrollable-body').animate({scrollTop:scrollPos}, scrollPos);
}
HiddenInput
HiddenInput
<h:inputHidden id="scrollPos" />
在数据表行的Ajax事件中选择
In Ajax event of datatable row select
onstart="saveScrollPos()"
保存记录时,在CommandButton中使用以下代码
The below code in CommandButton while saving record
oncomplete="autoScroll()"
这篇关于PrimeFaces dataTable滚动条在所需位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!