PrimeFaces数据表向下滚动到特定位置

Question

PrimeFaces数据表向下滚动到特定位置

primefacesdatatablescroll

3

我正在使用JSF和PrimeFaces开发一个应用程序，关于PrimeFaces的datatable，我需要帮助。我的表格中有大量的数据，可以进行单选或多选。

我希望能够通过操作或默认位置自动选择行。

我的需求是当我在表格中选择第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);
        }

但它也没有起作用，有人能帮我解决这个问题吗？

- user2971169

可能有用：https://dev59.com/YGjWa4cB1Zd3GeqPq3dR - kolossus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gio · Accepted Answer

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

            ....