1

在按列排序后，我一直在寻找解决 DataTable 实时滚动问题的方法。

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

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

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

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

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

任何人都可以帮助我吗？

感谢和问候。

<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...

4

5 回答 5

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>

键将参数 allLoadedLiveScroll 设置为 false，以便在过滤器响应或排序操作后再次获取所有数据。Ajax 事件被配置为重置 dataTable 滚动小部件的参数。

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

于 2016-05-25T10:01:29.133 回答
0

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

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

于 2013-01-15T12:54:32.827 回答
0

我在数据表顶部找到了一个带有提醒的 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>

希望这对某人有所帮助。

于 2013-01-24T09:54:17.813 回答
0

SerhatTR 的 anwser 几乎做到了。:) 客户端 scrollOffset 需要在排序之前在 liveScroll 表上重置。

于 2014-02-14T19:08:23.550 回答
0

正如它在接受的答案中提到的那样，scrollOffset是客户端 Datatable 小部件对象上的一个属性，即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>
于 2015-04-29T07:08:11.293 回答