监听器排序后 PrimeFaces DataTable 渲染列表错误（错误？）答案

【问题标题】：PrimeFaces DataTable rendering list wrong after listener sort (bug?)监听器排序后 PrimeFaces DataTable 渲染列表错误（错误？）
【发布时间】：2015-11-04 16:50:31
【问题描述】：

DataTable 会刷新，但不能正确渲染列表。（JSF 2.2、Mojarra 2.2.0、PrimeFaces 5.2）

我在 PrimeFaces DataTable 中有一个日期列表，每次用户添加或编辑日期时我都会重新排序。这几乎完美无缺。请帮我看看我做错了什么，或者让我知道我发现了一个错误。（注意，它不是 update 目标，因为我尝试使用 update="@all" 并没有改变任何东西。）

用下面的代码试试这个：

1) 添加 2015 年 11 月 21 日，然后添加 2015 年 11 月 20 日。请注意，它对它们进行了重新排序onAdd。

控制台：

onAdd, after
DataTableEntry[Date:Fri Nov 20 00:00:00 EST 2015]
DataTableEntry[Date:Sat Nov 21 00:00:00 EST 2015]

2) 然后编辑 2015 年 11 月 21 日，将其更改为 2015 年 11 月 19 日。请注意，已编辑的一个消失了，现在有两个 20。 错误？！？

控制台：

onRowEdit, before
DataTableEntry[Date:Fri Nov 20 00:00:00 EST 2015]
DataTableEntry[Date:Thu Nov 19 00:00:00 EST 2015]
onRowEdit, after
DataTableEntry[Date:Thu Nov 19 00:00:00 EST 2015]
DataTableEntry[Date:Fri Nov 20 00:00:00 EST 2015]

3) 然后点击我的“刷新页面”命令按钮。它现在可以正确显示了。

添加日期永远不会有问题，无论其之前/之后/之后的位置如何。我发现您可以编辑日期，只要它实际上不更改顺序，它就可以正常工作。更改顺序的那一刻，已编辑的那个消失了，旁边的一个在视觉上被复制到它的位置。

datatablesort.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    >
<h:head>
    <title><ui:insert name="title">DataTable</ui:insert></title>
</h:head>

<h:body>
    <h:form id="modelerForm">
        <p:commandButton value="Refresh page" ajax="false"/>

        <h:outputLabel for="date" value="Date"/>
        <h:panelGroup>
            <p:calendar id="date" pattern="MM/dd/yyyy" placeholder="mm/dd/yyyy" mask="true" showOn="button" navigator="true"/>
            <h:commandButton value="Add">
                <f:ajax event="action" listener="#{dataTableBean.onAdd}" execute="date" render="entries"/>
            </h:commandButton>
        </h:panelGroup>

        <p:dataTable id="entries" value="#{dataTableBean.entries}" var="entry" emptyMessage="No dates added" editable="true" tableStyle="width:auto">
            <p:ajax event="rowEdit" listener="#{dataTableBean.onRowEdit}" update="entries"/>
            <p:column headerText="Dates">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{entry.date}">
                            <f:convertDateTime pattern="MM/dd/yyyy" />
                        </h:outputText>
                    </f:facet>
                    <f:facet name="input">
                        <p:calendar id="date" value="#{entry.date}" pattern="MM/dd/yyyy" placeholder="mm/dd/yyyy" mask="true" showOn="button" navigator="true"/>
                    </f:facet>
                </p:cellEditor>
            </p:column>
            <p:column>
                <p:rowEditor/>
            </p:column>
            <p:column>
                <p:commandLink title="Remove date">
                    <h:outputText value="" styleClass="ui-icon ui-icon-trash"/>
                    <f:ajax event="click" listener="#{dataTableBean.entries.remove(entry)}" render="entries"/>
                </p:commandLink>
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

DataTableBean.java

package com.aadhoc.test;

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

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.UIComponent;
import javax.faces.component.UIInput;
import javax.faces.event.AjaxBehaviorEvent;

import org.primefaces.component.datatable.DataTable;
import org.primefaces.event.RowEditEvent;

@ManagedBean(name="dataTableBean")
@SessionScoped
public class DataTableBean {

    private List<DataTableEntry> entries = new ArrayList<>();
    public List<DataTableEntry> getEntries() {
        return entries;
    }
    public void setEntries(List<DataTableEntry> entries) {
        this.entries = entries;
    }   

    public void onAdd(AjaxBehaviorEvent event) {
        DumpList("onAdd, before");

        UIComponent component = event.getComponent();
        UIComponent dateComp = component.findComponent("date");
        Date date = (Date) ((UIInput)dateComp).getValue();
        DataTableEntry entry = new DataTableEntry();
        entry.setDate(date);
        getEntries().add(entry);

        sortEntries(getEntries());
        DumpList("onAdd, after");
    }

    public void onRowEdit(RowEditEvent event) {
        DumpList("onRowEdit, before");

        // Get entries via DataTable#getValue because in real code
        // I don't have direct access to entries.
        DataTable dt = (DataTable) event.getSource();
        @SuppressWarnings("unchecked")
        List<DataTableEntry> entries = (List<DataTableEntry>) dt.getValue();
        sortEntries(entries);

        DumpList("onRowEdit, after");
    }

    private void DumpList(String msg) {
        System.out.println(msg);
        for (DataTableEntry entry : entries) {
            System.out.println(entry);
        }
    }

    private <T> void sortEntries(List<DataTableEntry> entries) {
        entries.sort(new Comparator<DataTableEntry>() {
            @Override
            public int compare(DataTableEntry entry1, DataTableEntry entry2) {
                return entry1.getDate().compareTo(entry2.getDate());
            }
        });
    }
}

DataTableEntry.java

package com.aadhoc.test;

import java.io.Serializable;
import java.util.Date;

public class DataTableEntry implements Serializable {
    private static final long serialVersionUID = -2513940455250513641L;
    private Date date;
    public Date getDate() {
        return date;
    }
    public void setDate(Date date) {
        this.date = date;
    }

    public String toString() {
        return getClass().getSimpleName()+"[Date:"+getDate()+"]";
    }
}

【问题讨论】：

我不知道为什么会这样，但 <p:dataTable> 的 id 是 entries，在 <p:ajax event="rowEdit" update="entries" .../> 中提到，假设 rowEdit 事件应该更新整个数据表是不真实的。 rowEdit 事件默认为正在编辑的当前行。尝试通过在<p:ajax event="rowEdit" update="entries" .../> 中提及其id 来更新数据表将被忽略。如果您需要在每次编辑一行时更新整个数据表，那么最好放弃内联编辑并改用<p:dialog>。
有趣的想法。我刚刚尝试使用update="@all" 和update="@none" 只是发现没有任何区别。也许它被忽略了。 onAdd 在重新排序时效果很好，但您指出 rowEdit 的行为不同。作为替代方案，有什么方法可以让它在视觉上强制用户不可更改的排序，而不是每次都重新使用模型？
现在我已经禁用了对每个添加/编辑的排序，并打开了自然列排序功能并将其设为默认值。加载和刷新会重新建立日期顺序，因为该排序是默认的。如果我可以告诉它在每次添加/编辑后使用sortBy，我就会拥有我想要的一切。

标签： jsf primefaces jsf-2.2

【解决方案1】：

我遇到了同样的问题。

解决方法：在<p:dataTable widgetVar="datatableVar" ...> 中定义 widgetVar 属性，并将这一行添加到 onRowEdit 函数的末尾：

RequestContext.getCurrentInstance().execute("PF('datatableVar').filter()");

这将强制渲染整个数据表。

【讨论】：

我相信你的回答是有效的。在那篇文章发布几个月后，我将我的项目从 JSF 转移了出去。我希望我的帖子对您或其他人有所帮助。谢谢！