Question

在按列排序后，我一直在搜索DataTable实时滚动问题的解决方案。

首先我发现“列”应该有固定的宽度：

http://code.google.com/p/primefaces/issues/detail?id=1333

然后我发现应该使用scrollRows而不是行

http://code.google.com/p/primefaces/issues/detail?id=1236

虽然我已经进行了这些更改，但在按列排序后，我无法设置实时滚动。

有人可以帮我吗？

谢谢＆amp;问候。

<p:dataTable  id="simulationProductDtId" emptyMessage="#{msgs.notFoundSimulationDetail}" var="item"
         value="#{SimulationResultProductBean.simulationSummaryDetailList}"
         scrollable="true"
         scrollRows="25"
         scrollHeight="350" 
         liveScroll="true"
          resizableColumns="true" 
         style="border-bottom:1px solid #427CC7; overflow:scroll;position: relative;max-width: 100%;overflow-x: hidden"
         rowStyleClass="#{(SimulationResultProductBean.collapseSuperCode and item.gam) ? 'row' : null}"
          selection="#{SimulationResultProductBean.selectedSimulationDetail}" selectionMode="multiple"
         rowKey="#{item.id}">
          <f:facet name="header">
                                                  ...
          </f:facet>
          <p:column sortBy="#{item.productCode}" width="40"
                          rendered="#{DynamicSimulationTableBean.columnRenderedMap['productCode']}">
                         <f:facet name="header">
                               <h:outputLabel value="#{msgs.code}"/>
                          </f:facet>
                          <h:outputText value="#{item.productCode}" >
                                 <f:convertNumber type="number" integerOnly="true" groupingUsed="false"/>
                         </h:outputText>
           </p:column>

           <p:column sortBy="#{item.productName}" style="width:100px"
                           rendered="#{DynamicSimulationTableBean.columnRenderedMap['productName']}">
                          <f:facet name="header">
                             <h:outputLabel value="#{msgs.description}"/>
                          </f:facet>
           </p:column>
          //Other columns with fixed widths...

Answer 1

回答可能为时已晚，但我想分享一个我已经实现的解决方案，因为我找不到任何使用primefaces 5.2来解决问题的代码。

<p:dataTable id="entitiesTable" ...widgetVar="wtable" scrollRows="3" scrollable="true" liveScroll="true"... >
    <p:ajax event="filter" update="entitiesTable" oncomplete="resetScrollPos();" />
    <p:ajax event="sort" update="entitiesTable" oncomplete="resetScrollPos();" />
</p:dataTable>

<script type="text/javascript">
    function resetScrollPos(){
        PF('wtable').scrollOffset=0;    
        PF('wtable').scrollBody.scrollTop(1);   
        PF('wtable').allLoadedLiveScroll = false;               
    } 
</script>

密钥设置de param allLoadedLiveScroll为false，以便在筛选器响应或排序操作后再次获取所有数据。 Ajax事件配置为重置dataTable滚动小部件的参数。

希望这对有同样问题的人有所帮助。

Answer 2

检查你的primefaces版本，primefaces中的数据表似乎是一个非常不稳定的组件。

我正在使用带有排序列的3.4版，但我从未尝试过制作实时滚动。我使用页面滚动。检查您的浏览器，Internet Explorer非常不稳定。

Answer 3

我找到了一个LAZY解决方案，在数据表的顶部有一个提醒：

    <script> 
    function liveScroll(){
         simulationProductDt. scrollOffset = 25;
     }
    </script>
     <!-- UPDATE scrollOffset value in the liveScroll method when scrollRows is changed!-->
    <p:dataTable  id="simulationProductDtId" emptyMessage="#{msgs.notFoundSimulationDetail}" 
                         scrollable="true" scrollRows="25" scrollHeight="350"  liveScroll="true" 
                        ...other properties


         <p:ajax  event="sort" update="simulationProductDtId" onstart="liveScroll()" onerror="alert('ERROR!')" />
     </p:dataTable>

希望这对某人有帮助。

Answer 4

SerhatTR的anwser几乎把它钉了起来。 :) 客户端scrollOffset需要在排序之前在liveScroll表上重置。

Answer 5

正如在接受的答案scrollOffset中提到的那样，客户端数据小部件对象上的属性，即widgetVar上找不到id。

<p:dataTable id="tableId" widgetVar="tableWidget" >
   <p:ajax event="sort" update="tableId" onstart="resetScrollPos()" />
   ...
</p:dataTable>

<script type="text/javascript">
    fucntion resetScrollPos(){
        tableWidget.scrollOffset = 25;
    }
</script>

按列排序后，未执行DataTable实时滚动

5 个答案: