Question

我在延迟加载Primefaces Datascroller组件方面遇到了问题。

我有一个jsf页面，应该在页面加载时显示10个事件。如果用户想要看到更多他/她可以单击更多按钮来加载并显示10个下一个事件。对于每个事件行，都有一个链接可用于显示事件的详细信息。

    <h:form id="mainForm" >
        <p:dataScroller value="#{backing.lazyModel}" var="event" lazy="true" chunkSize="10" rowIndexVar="index">
            #{event.name}
            <p:commandLink class="view-trigger"
                value="View Event Details"
                actionListener="#{backing.initViewEventDetails(index, event)}"/>
            <f:facet name="loader">
                <p:outputPanel 
                        visible="#{backing.lazyModel.rowCount gt 10}"
                        rendered="#{backing.lazyModel.rowCount gt 10}">
                    <p:commandLink value="More" />
                </p:outputPanel>
            </f:facet>
        </p:dataScroller>
    </h:form>

初始搜索工作正常，也就是说，当我单击查看事件详细信息链接时，我的辅助bean被调用，我看到收到的索引和事件对应于我点击的行。

但是，一旦我加载了包含1个额外事件的下一个块，该页面将显示11个事件，但单击视图事件详细信息链接会发送正确的索引，但不会发送正确的事件。例如，如果我在索引0处单击事件，则在索引10处获取事件，如果我在索引1处单击事件，则不会调用我的辅助bean。

当我点击更多按钮但我的懒惰数据模型仍然记得时，看起来datascroller忘记了最后10个事件。

支持bean：

@ManagedBean(name="backing")
@ViewScoped
public class DataScrollerBacking implements Serializable {

private static final long serialVersionUID = 4012320411042043677L;
private static final Logger LOGGER = Logger.getLogger(DataScrollerBacking.class);

@ManagedProperty("#{settings.dataSource}")
private String dataSource;

private WebEventDAO webEventDAO;

private LazyDataModel<Event> lazyModel;

@PostConstruct
public void init() {
    webEventDAO = CommonDAOFactory.getInstance(dataSource).getWebEventDAO();
    search();
}

public void search() {
    DateTime start = new DateTime(2014, 1, 1, 0, 0 ,0);
    final Date startDate = start.toDate();
    final Date endDate = start.plus(Years.ONE.toPeriod()).minus(Seconds.ONE.toPeriod()).toDate();

    lazyModel = new LazyDataModel<Event>() {

        private static final long serialVersionUID = 1231902031619933635L;
        private LinkedHashSet<Event> eventCache; // Ordered set of all retrieved events so far.
        // I'm using a set because the load method is called twice on page load (any idea why???) and I don't want duplicates in my cache.

        @Override
        public List<Event> load(int first, int pageSize, String sortField, SortOrder sortOrder, Map<String, Object> filters) {
            List<Event> events = new ArrayList<Event>(10);
            try {
                if(eventCache == null){
                    int count = webEventDAO.getSearchByPeriodRaceTypeAndRaceStatusForCompanyCount(Collections.singletonList(1), startDate, endDate, null, null);
                    this.setRowCount(count);
                    eventCache = new LinkedHashSet<Event>(count);
                }
                events = webEventDAO.searchByPeriodRaceTypeAndRaceStatusForCompany(Collections.singletonList(1), startDate, endDate, null, null, true, first, pageSize);
                eventCache.addAll(events);
            } catch (DAOException e) {
                LOGGER.error("An error occurred while retrieving events.", e);
            }
            return events;
        }
    };

}

public void initViewEventDetails(Integer index, Event event){
    LOGGER.info("index=" + index + " eventname=" + event.getName());
}

public String getDataSource() {
    return dataSource;
}

public void setDataSource(String dataSource) {
    this.dataSource = dataSource;
}

public LazyDataModel<Event> getLazyModel() {
    return lazyModel;
}

public void setLazyModel(LazyDataModel<Event> lazyModel) {
    this.lazyModel = lazyModel;
}}

由于页面显示正确的信息并且收到的索引始终有效，我目前的解决方法是通过索引获取惰性数据模型中的事件。

但是，我想了解为什么收到的事件不是我点击的事件。

我做错了什么或这只是滚动条的实现方式？

在Mojarra 2.2，Tomcat 7，Primefaces 5，Omnifaces 1.8上运行

Answer 1

我在此链接http://www.theserverside.com/news/thread.tss?thread_id=44186

中找到了有关请求范围行为的良好解释

如果您在请求范围内使用ManagedBeans，则会遇到问题 DataTables中的CommandLinks。 DataTables是我真正喜欢的一件事关于JSF，CommandLinks也经常派上用场。但是当你将CommandLink放在DataTable中，例如。 g。，选择条目 CommandLink所在的行，你会被咬伤。也就是说，如果你希望ManagedBeans具有请求范围。应该采取的行动由CommandLink触发的永远不会触发，页面很简单再次渲染。这种行为的原因是DataTable 在渲染期间修改CommandLink的id，但是 CommandLink不知道它是使用不同的id呈现的。在解码通过单击触发的请求期间 CommandLink，ComandLinkRenderer查看隐藏的表单参数。如果该表单参数的值等于CommandLink的id，一个动作排队。如果没有，没有做任何事情。自DataTable以来更改id，隐藏表单参数的值不匹配 CommandLink的id。

根据上述情况，您需要将范围注释从 @ViewScoped 更改为 @SessionScope ，您的问题将自动解决。它似乎是比编写其他代码更好的解决方案，除非你需要保留@ViewScopped

Answer 2

我终于有时间花在这个问题上，我找到了一个解决方法。这是一个黑客，所以也许正确的解决方案是使用不同的组件或创建自己的组件。

将DataScroller与LazyDataModel一起使用时，似乎会出现Primefaces DataScroller限制。似乎该组件不是为此而设计的。

为了避免这个问题，我实现了自己的延迟加载，除了新添加的元素之外，还返回了相同的列表实例。

这是我之前修改的示例，用于实现这种新的延迟加载模式：

html页面：

<h:form id="mainForm" >
    <p:dataScroller value="#{backing.events}" var="event" rowIndexVar="index">
        #{event.name}
        <p:commandLink class="view-trigger"
            value="View Event Details"
            action="#{backing.initViewEventDetails(index, event)}"/>

        <f:facet name="loader"><h:outputText value=""/></f:facet>
    </p:dataScroller>

    <p:commandLink value="More" process="@form" update="@form" 
        action="#{backing.loadMore()}"
        visible="#{backing.totalCount gt backing.events.size()}"
        rendered="#{backing.totalCount gt backing.events.size()}"/>
</h:form>

DataScroller不再具有lazy =“true”，chunkSize =“10”，使用名为events的列表作为值并声明一个空的加载器构面（以避免在到达列表底部时自动加载更多）。我使用了一个调用backing.loadMore（）的commandLink并更新了表单以替换loader facet。

支持bean：

@Named("backing")
@ViewScoped
public class DataScrollerBacking implements Serializable {

private static final long serialVersionUID = 4012320411042043677L;

private static final Logger LOGGER = Logger.getLogger(DataScrollerBacking.class);

private static final Integer CHUNK_SIZE = 10;

@DataSource
@Inject
private String dataSource;

private WebEventDAO webEventDAO;

private List<Event> events;
private Integer totalCount;
private Date startDate;
private Date endDate;

@PostConstruct
public void init() {
    webEventDAO = CommonDAOFactory.getInstance(dataSource).getWebEventDAO();
    search();
}

public void search() {
    DateTime start = new DateTime(2014, 1, 1, 0, 0 ,0);
    startDate = start.toDate();
    endDate = start.plus(Years.ONE.toPeriod()).minus(Seconds.ONE.toPeriod()).toDate();

    try {
        totalCount = webEventDAO.getSearchByPeriodRaceTypeAndRaceStatusForCompanyCount(Collections.singletonList(1), startDate, endDate, null, null);
        events = new ArrayList<Event>(totalCount);
        loadMore();
    } catch (DAOException e) {
        LOGGER.error("An error occurred while retrieving events.", e);
    }
}

public void loadMore() {
    List<Event> newEvents = new ArrayList<Event>(CHUNK_SIZE);
    try {
        newEvents = webEventDAO.searchByPeriodRaceTypeAndRaceStatusForCompany(Collections.singletonList(1), startDate, endDate, null, null, true, events.size(), CHUNK_SIZE);
        events.addAll(newEvents);
    } catch (DAOException e) {
        LOGGER.error("An error occurred while retrieving events.", e);
    }

}

public void initViewEventDetails(Integer index, Event event){
    LOGGER.info("index=" + index + " eventname=" + event.getName());
}

public String getDataSource() {
    return dataSource;
}

public void setDataSource(String dataSource) {
    this.dataSource = dataSource;
}

public List<Event> getEvents() {
    return events;
}

public void setEvents(List<Event> events) {
    this.events = events;
}

public Integer getTotalCount() {
    return totalCount;
}

public void setTotalCount(Integer totalCount) {
    this.totalCount = totalCount;
}}

在辅助bean中，搜索方法计算事件总数，保存该信息并调用loadMore（）来加载事件列表中的前10个事件。

单击more按钮时，将再次调用loadMore（），并在事件列表末尾附加下10个事件。

现在当我点击新加载的元素时，commandLink会使用正确的值调用支持bean。

Answer 3

解决方法是使用PrimeFaces远程命令，使用rc传递参数（[name：＆＃39; paramName＆＃39;，value：someParamValue]）。这些参数应该可以使用＃{param [＆＃39; paramName＆＃39;]} EL表达式

示例：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>

        <ui:composition>
            <p:dataTable id="#{id}" widgetVar="#{id}"
                         value="#{requestCache.getLazy(id, () -> dataSource)}" var="rpo"
                         selectionMode="single" selection="#{selection}"
                         lazy="true" paginator="true" rows="#{pageSizeController.pageSize}"
                         pageLinks="10" paginatorPosition="top"
                         paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         currentPageReportTemplate="(#{label.Page} {currentPage} #{label.of} {totalPages}, #{label.Row} {startRecord} - {endRecord} #{label.of} {totalRecords})"
                         rowsPerPageTemplate="5 10 20 30 40 50 100"
                         scrollable="true" scrollHeight="#{empty scrollHeight ? 300 : scrollHeight}"
                         resizableColumns="true" emptyMessage="#{label.Table_is_empty}">
    <p:column>
                    <h:outputText value="#{rpo.decreeSequence.code}" />
                    <p:commandLink id="displayAdditionalInfoCommandLink" type="link" style="float: right; text-decoration: none"
                                   onclick="displayAdditionalInfo([{name: 'refundPaymentOrderId', value: #{rpo.id}}])"
                                   title="#{label.Additional_information}">
                        <h:outputLabel for="displayAdditionalInfoCommandLink" styleClass="fa fa-info-circle"
                                       onmouseover="jQuery(this).addClass('fa-lg').css('cursor', 'pointer')"
                                       onmouseout="jQuery(this).removeClass('fa-lg')"/>
                    </p:commandLink>
                </p:column>
</p:dataTable>
            <p:remoteCommand name="displayAdditionalInfo" process="@this" update="@parent">
                <f:setPropertyActionListener target="#{refundPaymentOrderCache.refundPaymentOrder}"
                                             value="#{refundPaymentOrderRepo.find(requestCache.toLong(param['refundPaymentOrderId']))}" />
                <f:actionListener binding="#{dialog.displayInputForm('RPO_ADDITIONAL_INFO')}" />
            </p:remoteCommand>
</ui:composition>
    </h:body>
</html>

CommandLink无法处理延迟加载的Primefaces Datascroller

3 个答案: