primefaces 数据表向下滚动到位置

Question

我正在开发一个使用带有 primefaces 的 jsf 的应用程序，我需要一个关于 primefaces 数据表的帮助我在数据表中有大量数据，可以选择一个或多个选项。

我想通过选择的 Action 或默认位置自动选择行。

我的需要是当我选择表格中的第 20 行并进入下一页并执行一些过程返回到同一页面时，它在第 20 行中被选中但尚未向下滚动。

我需要向下滚动到选择和处理它的位置。

这是我的代码供查看

<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 来固定滚动位置

var scrollPosition;
        function saveScrollPosition() {
            scrollPosition = $('#reactionTable').scrollTop();
        }
        function setScrollPosition() {
            $('#reactionTable').scrollTop(scrollPosition);
        }

但是还是不行谁能帮我解决这个问题

Answer 1

以下 javascript 函数滚动 <p:dataTable selectionMode="single" 的选定项目进入可见区域:

/**
 * 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;
}

例如，在操作数据表内容的 ajax 请求之后调用此函数:

<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');" />

            ....