使用AJAX更新JSF/Primefaces数据表中的单行

Question

在使用AJAX时,如何更新ap:datatable中的单行？

我不想更新整个数据表,因为它有很多行,这需要一些时间..

我的布局:

<h:form id="visitForm">
        <p:dataTable id="visitTable" var="visit" value="#{visitBean.findAllVisits()}">

            <p:column headerText="${msgs['email']}"
                <h:outputText value="#{visit.contactDetail.email}"/>
            </p:column>

            <p:column headerText="${msgs['clearance']}" id="clearance">
                <p:commandButton value="${msgs['clearance.ok']}"  actionListener="#{visitBean.makeClearanceNotOk(visit)}"/>
            </p:column>
        </p:dataTable>
    </h:form>

我尝试了一些像update ="clearance"等的东西,但它似乎没有用.

我正在使用JSF 2.1和Primefaces 5.2

Answer 1

不确定我是否参加聚会迟到了，但让我在这个主题上花 5 美分，了解如何使用 PrimeFaces 的普通 ajax 功能来更新行的内容。

1）部分更新：我使用 PF 更新特定行中某些内容的第一种方法并不是更新整行，而是更新行内的感兴趣区域。这可以通过仅定义保持面板并更新它们来实现。例如：

<h:form id="testForm">
    <p:dataTable id="myEntityTable" var="myEntity" value="#{myController.allEntities}">

        <p:column headerText="id">
            <h:outputText value="#{myEntity.id}"/>
        </p:column>

        <p:column headerText="last update">
            <p:outputPanel id="lastUpdatePanel">
                <h:outputText value="#{myEntity.lastUpdate}">
                    <f:convertDateTime pattern="HH:mm:ss" type="date" />
                </h:outputText>
            </p:outputPanel>
        </p:column>

        <p:column headerText="counter">
            <p:outputPanel id="counterPanel">
                <h:outputText value="#{myEntity.counter}"/>
            </p:outputPanel>
        </p:column>

        <p:column headerText="increment">
            <p:commandButton value="+"
                actionListener="#{myController.increment(myEntity)}"
                update="counterPanel, lastUpdatePanel"/>
        </p:column>
    </p:dataTable>
</h:form>

诀窍是更新目标面板（在本例中为fragment update="counterPanel, lastUpdatePanel"）。这会产生如下图所示的结果：

2）实际更新行：通常以前的方法足够好。但是，如果确实需要更新行，可以遵循之前答案之一中给出的建议并使用关键字@row：

<h:form id="testForm">
    <p:dataTable id="myEntityTable" var="myEntity" value="#{myController.allEntities}" rowIndexVar="rowIndex">

        <p:column headerText="id">
            <h:outputText value="#{myEntity.id}"/>
        </p:column>

        <p:column headerText="last update 1">
            <p:outputPanel>
                <h:outputText value="#{myEntity.lastUpdate}">
                    <f:convertDateTime pattern="HH:mm:ss" type="date" />
                </h:outputText>
            </p:outputPanel>
        </p:column>

        <p:column headerText="last update 2">
            <h:outputText value="#{myEntity.lastUpdate}">
                <f:convertDateTime pattern="HH:mm:ss" type="date" />
            </h:outputText>
        </p:column>

        <p:column headerText="counter">
            <p:outputPanel>
                <h:outputText value="#{myEntity.counter}"/>
            </p:outputPanel>
        </p:column>

        <p:column headerText="increment">
            <p:commandButton value="+"
                actionListener="#{myController.increment(myEntity)}"
                update="@form:myEntityTable:@row(#{rowIndex})"/>
        </p:column>
    </p:dataTable>
</h:form>

诀窍是将列中的每个内容保存在 a 内p:outputPanel，然后让其update="@form:myEntityTable:@row(#{rowIndex})"完成工作。为了说明这一点，我有意识地保留了“最后更新 2”列，而没有使用 outputPanel：

因此，虽然“上次更新 1”和“计数器”列实际上在单击“+”后更新，但“上次更新 2”列保持不变。因此，如果您需要更新内容，请用outputPanel. 还值得注意的是，保存每一列内容的 outputPanel 不需要显式 id（如果需要，可以添加一个）。为了完整起见，在这些示例中我使用了 PF 6.2。backbean 非常简单：

package myprefferedpackage;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class MyController {

    private List<MyEntity> entities;

    @PostConstruct
    public void init() {
        this.entities = new ArrayList<MyEntity>(10);
        for(int i = 0; i < 10; ++i) {
            this.entities.add(new MyEntity(i));
        }
    }

    public List<MyEntity> getAllEntities() {
        return entities;
    }

    public void increment(MyEntity myEntity) {
        myEntity.increment();
    }

    public class MyEntity {
        private int id;
        private int counter;
        private Date lastUpdate;

        public MyEntity(int id) {
            this.id = id;
            this.counter = 0;
            this.lastUpdate = new Date();
        }

        public void increment() {
            this.counter++;
            this.lastUpdate = new Date();
        }

        public int getId() {
            return id;
        }

        public int getCounter() {
            return counter;
        }

        public Date getLastUpdate() {
            return lastUpdate;
        }
    }
}

Answer 2

您可以使用@row(n)搜索表达式来执行此操作 - 它会更新表中的第n行.要更新当前行,您需要将行索引作为参数传递.设置rowIndexVar="rowIdx"属性<p:dataTable>然后:

<p:commandButton ... update="@form:visitTable:@row(#{rowIdx})" />

Answer 3

可以使用OmniFaces等实用程序库的“ajax”功能，也可以使用PrimeFaces 选择器进行创意。

在这两种情况下，您都需要访问“当前”行或 rowId。但由于按钮在行中，所以这应该不是问题。不幸的是，我没有时间为您创建示例