Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/blackberry/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
primefaces数据表向下滚动到位置_Primefaces_Datatable_Scroll - Fatal编程技术网

primefaces数据表向下滚动到位置

primefaces数据表向下滚动到位置,primefaces,datatable,scroll,Primefaces,Datatable,Scroll,我正在使用jsf和primefaces开发一个应用程序,我需要一个关于primefaces datatable的帮助。我在datatable中有大量数据,可以选择单个或多个选项 我想通过所选的操作或默认位置自动选择行 我需要的是,当我在表格中选择第20行并进入下一页时,执行一些流程返回到同一页,但它在第20行中被选中,但尚未向下滚动 我需要向下滚动到它被选择和处理的位置 这是我的查看代码 <p:dataTable id="reactionTable" var="reactions" val

我正在使用jsf和primefaces开发一个应用程序,我需要一个关于primefaces datatable的帮助。我在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函数滚动
的选定项可能有用:如果您有多个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');" />

            ....