primefaces数据表向下滚动到位置
我正在使用jsf和primefaces开发一个应用程序,我需要一个关于primefaces datatable的帮助。我在datatable中有大量数据,可以选择单个或多个选项 我想通过所选的操作或默认位置自动选择行 我需要的是,当我在表格中选择第20行并进入下一页时,执行一些流程返回到同一页,但它在第20行中被选中,但尚未向下滚动 我需要向下滚动到它被选择和处理的位置 这是我的查看代码primefaces数据表向下滚动到位置,primefaces,datatable,scroll,Primefaces,Datatable,Scroll,我正在使用jsf和primefaces开发一个应用程序,我需要一个关于primefaces datatable的帮助。我在datatable中有大量数据,可以选择单个或多个选项 我想通过所选的操作或默认位置自动选择行 我需要的是,当我在表格中选择第20行并进入下一页时,执行一些流程返回到同一页,但它在第20行中被选中,但尚未向下滚动 我需要向下滚动到它被选择和处理的位置 这是我的查看代码 <p:dataTable id="reactionTable" var="reactions" val
<p:dataTable id="reactionTable" var="reactions" value="#{curation.reactionsList}"
selection="#{curation.selectedReactions}" scrollable="true" scrollHeight="200" rows="10"
rowKey="#{reactions.id}" widgetVar="reactionVar"
style="width: 1350px; font-size: 13px;" filteredValue="#{curation.reactionsFilteredList}"
resizableColumns="true">
<p:ajax event="rowToggle" listener="#{curation.toggleReaction}"/>
<p:ajax event="rowSelect" listener="#{curation.showStages}" update="@form"/>
<p:column selectionMode="multiple" style="width:5%" />
<p:column headerText="Id" width="7%" filterBy="#{reactions.rxnId}" filterStyle="width: 35px;" filterMatchMode="contains" sortBy="#{reactions.rxnId}">
#{reactions.rxnId}
</p:column>
<p:column headerText="RxnNo" width="9%" filterBy="#{reactions.rxnNo}" filterStyle="width: 35px;" filterMatchMode="contains" sortBy="#{reactions.rxnNo}">
#{reactions.rxnNo}
</p:column>
<p:column headerText="RxnSeq" width="9%" filterBy="#{reactions.rxnSeq}" filterStyle="width: 25px;" filterMatchMode="contains" sortBy="#{reactions.rxnSeq}">
#{reactions.rxnSeq}
</p:column>
<p:column headerText="RSD" width="40%" filterBy="#{reactions.rsd}" filterStyle="width: 250px;" filterMatchMode="contains" sortBy="#{reactions.rsd}">
#{reactions.rsd}
</p:column>
<p:column headerText="RSN" width="40%" filterBy="#{reactions.rsn}" filterStyle="width: 250px;" filterMatchMode="contains" sortBy="#{reactions.rsn}">
#{reactions.rsn}
</p:column>
<p:column headerText="RSN Free Type" width="40%" filterBy="#{reactions.rtf}" filterStyle="width: 250px;" filterMatchMode="contains" sortBy="#{reactions.rtf}">
#{reactions.rtf}
</p:column>
<f:facet name="footer">
<p:commandButton value="Copy" icon="ui-icon-search"
update="reactionTable" actionListener="#{curation.copyReaction()}" style="height: 25px; font-size: 12px; font-weight: bold;"/>
<p:commandButton value="Create RSD" id="create" actionListener="#{curation.createReaction()}" action="#{createReaction.createRsd()}" style="height: 25px; font-size: 12px; font-weight: bold;"/>
<p:commandButton value="Update" id="ajax" update="@form" actionListener="#{curation.updateBatch}" style="height: 25px; font-size: 12px; font-weight: bold;"/>
</f:facet>
但它也不起作用
有人能帮我解决这个问题吗?下面的javascript函数滚动
的选定项可能有用:如果您有多个NamingContianer(例如mainForm:tabs:view:table
),您需要将所有:
替换为var primfcid=idDataTable.replace(/:/g,\\:)
为了获得正确的单元格高度,在我的例子中,我需要像这样添加边框var itemHeight=$(idDataContainer).children(“tr”).height()+parseInt($(idDataContainer).children(“tr”).css(“border top width”)+parseInt($(idDataContainer).children(“tr”).css(“border bottom width”)代码>
var scrollPosition;
function saveScrollPosition() {
scrollPosition = $('#reactionTable').scrollTop();
}
function setScrollPosition() {
$('#reactionTable').scrollTop(scrollPosition);
}
/**
* This function scrolls the selected Item of a
* <p:dataTable id="idDataTable" selectionMode="single"
* into the visible area
* <p:dataTable renderes to a scroll-container with the css-class: ui-datatable-scrollable-body (inside the element with the id : "idDataTable")
* and to a container holding all items with the id: "idDataTable"_data
*
* @param idDataTable z.B.: idForm:idDataTable
*/
function autoScrollPDatatable(idDataTable)
{
// for selection in JQuery the ids with : must be endoded with \\:
var primfcid = idDataTable.replace(':', '\\:');
var idDataTbl = '#' + primfcid;
var idDataContainer = idDataTbl + "_data";
var totalHeight = $(idDataTbl + " .ui-datatable-scrollable-body").height();
var lichildren = $(idDataContainer).children("tr");
var itemHeight = $(idDataContainer).children("tr").height();
var anzItems = lichildren.length;
var anzVisItems = totalHeight / itemHeight;
var selItem = detectDataTableScrollPos(lichildren);
if(selItem == -1)
{
// no selection found...
return;
}
var maxScrollItem = anzItems - anzVisItems;
var scrollTopInPx;
if(selItem >= maxScrollItem)
{
// scroll table to the bottom
scrollTopInPx = maxScrollItem * itemHeight;
}
else if(selItem < 2)
{
// scroll table to the top
scrollTopInPx = 0;
}
else
{
// scroll selected item to the 1.2 th position
scrollTopInPx = (selItem - 1.2) * itemHeight;
}
$(idDataTbl + " .ui-datatable-scrollable-body").animate({scrollTop:scrollTopInPx}, scrollTopInPx);
}
function detectDataTableScrollPos(liChildren)
{
for (i=0;i< liChildren.length;++i)
{
var chd = liChildren[i];
var x = chd.getAttribute("aria-selected");
if(x === "true")
{
return i;
}
}
return -1;
}
<body>
<f:view>
<h:form id="idForm">
<p:dataTable id="idDatalist"
selectionMode="single"
scrollable="true"
scrollHeight="100%"
....>
</p:dataTable>
....
<p:ajax update=":idForm:idDatalist"
oncomplete="autoScrollPDatatable('idForm:idDatalist');" />
....