Primefaces DataTable、延迟加载和每行命令按钮答案

【问题标题】：Primefaces DataTable, lazy loading and CommandButton per rowPrimefaces DataTable、延迟加载和每行命令按钮
【发布时间】：2012-08-08 18:27:41
【问题描述】：

我有这个简单的页面：

<h:form id="form">

    <p:dataTable value="#{testBean.unitTypeModel}" var="elem" lazy="true" rows="10">
        <p:column headerText="class">#{elem.class.simpleName}</p:column>
        <p:column headerText="code">#{elem.code}</p:column>
        <p:column headerText="description">#{elem.description}</p:column>
        <p:column headerText="action">
            <p:commandButton action="test2" icon="ui-icon ui-icon-wrench" value="edit">
                <f:setPropertyActionListener target="#{testBean.selection}" value="#{elem}"/>
            </p:commandButton>
        </p:column>
    </p:dataTable>

    <p:commandButton action="test2" icon="ui-icon ui-icon-wrench"/>

</h:form>

并且DataTable 内的CommandButton 不起作用，只是刷新页面。但是外面的那个在工作。

如果我这样更改value 和lazy：

<h:form id="form">

    <p:dataTable value="#{testBean.unitTypeModel.load(0, 10, null, null, null)}" var="elem" lazy="false" rows="10">
        <p:column headerText="class">#{elem.class.simpleName}</p:column>
        <p:column headerText="code">#{elem.code}</p:column>
        <p:column headerText="description">#{elem.description}</p:column>
        <p:column headerText="action">
            <p:commandButton action="test2" icon="ui-icon ui-icon-wrench" value="edit">
                <f:setPropertyActionListener target="#{testBean.selection}" value="#{elem}"/>
            </p:commandButton>
        </p:column>
    </p:dataTable>

    <p:commandButton action="test2" icon="ui-icon ui-icon-wrench"/>

</h:form>

DataTable 内部的CommanButton 就像一个魅力。

有人知道为什么吗？

这是一个错误吗？

我来了

Glassfish 3.1.2
JSF 2.1.11 (Mojarra)
PrimeFaces 3.4-SNAPSHOT

【问题讨论】：

标签： jsf-2 primefaces lazy-loading datatables

【解决方案1】：

发现延迟数据模型在回发请求中必须是相同的实例，即使具有相同值的新实例也无法工作。所以它必须至少由一个@ViewScoped bean 提供。

【讨论】：

这并不完全正确：如果使用@ViewScoped 在会话中找到相同的LazyDataModel 实例会很有帮助，但您也可以使用@RequestScoped。关键是isRowAvailable() 方法在APPLY_REQUEST_VALUES 中求值时必须返回true，并且pageSize 字段的值必须大于零。我通过扩展LazyDataModel 实现了这一点，同时重载了两个方法：isRowAvailable()，这里我调用load(...) 并将结果应用到setWrappedData() 和第二种方法setRowIndex(int rowIndex)，我将pageSize 设置为我的默认值跨度>

【解决方案2】：

自发布此问题以来已过去四年，但问题仍然存在于 PrimeFaces 6.0 中。

我将向那些不想（或不能）使用 ViewScoped bean 的人发布解决方法。

前提是：“您不能将任何“ajaxified”项放在绑定到 RequestScoped 东西的惰性数据表中”。绝不。请记住，任何引发 ajax 调用的东西都不会起作用。

所以第一步是在数据表之外进行 ajax 调用。我们将使用 RemoteCommand 执行此操作。您可以将此 RemoteCommand 放置在 DataTable 之外的任何位置（当然是在表单内）

<p:remoteCommand name="remoteCall" action="#{bean.doStuff()}">
</p:remoteCommand>

现在，我们要做的就是从 DataTable 中调用这个 RemoteCommand。我正在使用一个链接来执行 javascript 调用，但你可以使用一个按钮或任何你喜欢的东西：

<p:column>
    <p:link value="#{item.id}" href="#" onclick="remoteCall([{name:'id', value:#{item.id}}])">
    </p:link>
</p:column>

此链接提供了一种调用 javascript 函数“remoteCall”的方法，该函数将执行对“bean.doStuff()”的 ajax 调用。

请注意，onClick 事件不仅包含对“remoteCall”的 javascript 调用，还包含一个只有一个参数的参数数组，名为“id”，值为“#{item.id}”。这将允许 RemoteCommand 将名为“id”的参数发送到支持 bean。

在“doStuff”方法中，您必须检索“id”参数值：

public void doStuff () {

    String id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");

}

【讨论】：