在 <p:ajax event="cellEdit"> 完成时更新整个 <p:dataTable>

Posted 2023-02-22

【中文标题】在 <p:ajax event="cellEdit"> 完成时更新整个 <p:dataTable>

【英文标题】：Updating entire <p:dataTable> on complete of <p:ajax event="cellEdit">

【发布时间】：2013-11-02 03:38:02

【问题描述】：

编辑单元格后，我很难重新渲染 PrimeFaces 数据表。更改一个单元格中的值可能会更改其他单元格中的条目，因此需要刷新整个表格。

这是 JSF 页面：

<h:form id="testForm">
    <p:outputPanel id="testContainer">

        <p:dataTable id="testTable" value="#tableBean.data" var="entry" editable="true" editMode="cell">

            <p:ajax event="cellEdit" listener="#tableBean.onCellEdit" update=":testForm:testContainer" />

            <p:column headerText="Col1">  
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#entry.col1" /></f:facet>
                    <f:facet name="input"><p:inputText value="#entry.col1" /></f:facet>
                </p:cellEditor> 
            </p:column>

            <p:column headerText="Col2">
                <p:cellEditor>
                    <f:facet name="output"><h:outputText value="#entry.col2" /></f:facet>
                    <f:facet name="input"><p:inputText value="#entry.col2" /></f:facet>
                </p:cellEditor>  
            </p:column>

        </p:dataTable>

        <p:commandButton id="refreshButton" value="Redisplay" update="testContainer" />

    </p:outputPanel>                                    
</h:form>

这是支持 bean：

@ManagedBean(name = "tableBean", eager = false)
@ViewScoped 
public class TableBean 

    public TableBean() 
        RowData entry = new RowData("a1", "b1");
        entries.add(entry);
        entry = new RowData("a2", "b2");
        entries.add(entry);
        entry = new RowData("a3", "b3");
        entries.add(entry);
    

    public class RowData 

        private String col1;
        private String col2;

        public RowData(String col1, String col2) 
            this.col1 = col1;
            this.col2 = col2;
        

        public String getCol1() 
            return col1;
        

        public void setCol1(String col1) 
            this.col1 = col1;
        

        public String getCol2() 
            return col2;
        

        public void setCol2(String col2) 
            this.col2 = col2;
        
    

    private ArrayList<RowData> entries = new ArrayList<RowData>();

    public List<RowData> getData() 
        return entries;
    

    public void onCellEdit(CellEditEvent event) 
        entries.get(event.getRowIndex()).setCol1("Dummy Col 1");
        entries.get(event.getRowIndex()).setCol2("Dummy Col 2");        
       

当在 cellEdit AJAX 事件中包含 update=":testForm:testContainer" 时，更改单元格值会删除屏幕上的数据表，并且只呈现单元格内容（连同按钮）——我不明白这是为什么。如果未指定 update 属性，表格将保持在屏幕上，活动单元格已更新，但其他单元格均未更新（正如预期的那样）。

可以通过在 AJAX cellEdit 事件中不指定更新属性并在编辑单元格的值后单击重新显示按钮来实现所需的行为（以非自动方式）。我怎样才能以自动化的方式实现这一点，为什么更新属性不能按我的预期工作？

我正在使用 PrimeFaces 4.0。

【问题讨论】：

您是否尝试将 update=":testForm:testContainer" 更改为 update=":testForm:testTable" ？

刚刚尝试过，但只有当前单元格在更新。

【参考方案1】：

我测试了您的代码。首先，我将 p:commandButton 从 p:outputPanel 中移出。这是修改后的代码：

<h:form id="testForm">
            <p:outputPanel id="testContainer">

                <p:dataTable id="testTable" value="#tableBean.data" var="entry" editable="true" editMode="cell">

                    <p:ajax event="cellEdit" listener="#tableBean.onCellEdit" update=":testForm:testContainer" />

                    (...)

                </p:dataTable>
            </p:outputPanel>
            <p:commandButton id="refreshButton" value="Redisplay" update="testContainer" />
        </h:form>

我认为这段代码不能正常工作。如果您更改表中的任何内容，则 p:ajax 每次都会呈现完整的表。因此，程序从 TableBean 构造函数中加载基本数据并删除了新数据。

如果我省略了您的 p:ajax 代码，屏幕上的任何新数据都不会消失。 refreshButton p:commandButton 工作正常。

当在单元格中包含 update=":testForm:testContainer" 时编辑 AJAX 事件，更改单元格值会删除屏幕上的数据表和 只呈现单元格内容（连同按钮）——我不 了解这是为什么。

我认为将 update=":testForm:testContainer" 添加到 ajax 是不好的设计，因为它更新的 outputPanel 超过了 exepted（第一次正常工作，第二次无法编辑单元格，因为程序更新到多次表）。

我不知道你的目标是什么。如果您想要不带命令按钮的渲染表，那么您可以指定一个 javascript 事件或 p:message，然后它就会消失，您可以渲染表。

我认为，如果您在 p:ajax 中省略更新或指定更新一个 p:message，并将 p.commandButton 移出testContainer，您的代码将开始正常工作。

【参考方案2】：

rowEdit 和 cellEdit 事件按设计在表内不会更新/重新呈现除当前行以外的任何内容，即使在 update 属性中明确指定时也不会。这是 PrimeFaces 过于热心地尝试最小化响应大小的结果。这在大多数情况下都有意义，但不适用于您的具体情况。值得一份问题报告。

与此同时，在他们修复此行为之前，最好的办法是使用 <p:remoteCommand> 调用所需的侦听器方法并执行表的完整更新。

重写

<p:dataTable ...>
    <p:ajax event="cellEdit" listener="#tableBean.onCellEdit" update=":testForm:testContainer" />
    ...
</p:dataTable>

到

<p:remoteCommand name="onCellEdit" action="#tableBean.onCellEdit" update="testContainer" />
<p:dataTable ...>
    <p:ajax event="cellEdit" oncomplete="onCellEdit()" />
    ...
</p:dataTable>

【讨论】：

@BalusC 我按照你的指导做了，但是Glassfish Server 提示错误方法is NOT FOUND，因为需要提到Tim Long 所说的这个方法包含CellEditEventparam。当单元格被编辑时，我想update whole datatable。你能帮帮我吗？

有人向 Primefaces 报告过这个问题吗？我们有 Primefaces PRO 并且愿意升级。

快速喊一声“谢谢”。我以为我快疯了。对我来说，我将 ajax cellEdit 监听器留在原处，然后只是将 update 属性移动到 remoteCommand，而在 remoteCommand 组件中没有任何操作，基本上仅用于执行 update 属性我是使用 ajax 事件。

@BalusC 此解决方案仅在使用回车键完成单元格编辑时才有效。如果一个单元格处于编辑器模式并且单击了另一个可编辑单元格，则触发 cellEdit 事件并且表格更新但不再可编辑！

【参考方案3】：

BaLusC 解决方案并没有直接为我工作。 onCellEdit 需要一个 CellEditEvent 作为参数。我的解决方法如下：

<p:remoteCommand name="onCellEdit" update="testContainer" />
<p:dataTable ...>
    <p:ajax event="cellEdit" listener="#tableBean.onCellEdit" oncomplete="onCellEdit()" />
    ...
</p:dataTable>

【讨论】：

你的方法有效，但只能编辑一个cell？如何解决这个问题？

就我而言，BaLusC 解决方案适用于我在可编辑表格中的 inputText，如果更改是在单元格内的自动完成控件中完成的，则整个表格不会更新。使用 remoteCommand 解决方案，效果很好。

BaLusC 解决方案对我也不起作用。这个效果很好！！

【参考方案4】：

如果没有一个解决方案对你有用，这对我有用

<p:dataTable ... id="theId" widgetVar="theWidget" ...>
                <p:ajax event="rowEdit" listener="#..."
                        oncomplete="PF('theWidget').filter()"/> 
....

我在 ajax 完成时调用 PF 小部件上的过滤器方法，任何“重新加载”表的方法都应该工作，我使用了过滤器，因为我的表有列过滤器。

【参考方案5】：

5年后，这个问题依然存在。不幸的是，尽管 Baukes 解决方案非常有用并且包含重要的见解，但它仍然不完整，正如 ltlBeBoy 在他的评论中指出的那样。没有更改的后续编辑会导致表格状态不一致，无法进行更多编辑。原因是，oncomplete 远程更新是在新单元格的编辑模式已经激活之后进行的。所以新单元格的编辑模式被更新破坏了。但是，无法在 Ajax 侦听器tableBean#onCellEdit 中进行更新，因为这会错误地仅显示一个单元格的表格。

解决方案是，仅在发生更改时才在远程命令侦听器中执行更新。因此，在tableBean 中，您实现了一个程序更新、一个远程侦听器和一个指示更改的标志：

public static void update(String id) 
   PrimeFaces pf = PrimeFaces.current(); //RequestContext.getCurrentInstance() for <PF 6.2
   if(pf.isAjaxRequest()) pf.ajax().update(id);


/** Whether onCellEdit changed the value */
boolean onCellEditChange;

public void onCellEditRemote()  
    if(!onCellEditChange) update("testContainer");


public void onCellEdit(CellEditEvent event) 
    ...  onCellEditChange= /*Change happend*/ ...

远程命令不再有更新属性：

<p:remoteCommand name="onCellEdit" actionListener="#tabelBean.onCellEditRemote"/>

【参考方案6】：

尝试使用进程

...

【参考方案7】：

这是我在这里的第一篇文章。正如 ltlBeBoy 所提到的，BalusC 的解决方案只有在单元格编辑通过回车键完成时才有效。 此处列出的其他建议均不适合我。 就我而言，我只想在 cellEdit 事件上更新表中的特定行（具有每列的平均值）。如果有人正在寻找解决方案，我将发布此信息：我设法通过在主数据表正下方的第二个数据表中分离该行来实现这一点。代码如下：

<pf:ajax event="cellEdit"
         listener="#newAgentMetricBacking.onCellEdit"
         update="c21413" />

<pf:dataTable id="c21413"
              styleClass="noHeader"
              value="">
    <pf:column>
        <h:outputText value="#bundle.TeamAverage"/>
    </pf:column>
    <pf:columns columnIndexVar="j"
                value="#newAgentMetricBacking.averageArray"
                var="avg">
        <h:outputText value="#newAgentMetricBacking. 
                               averageArray[j]"/>
    </pf:columns>
</pf:dataTable>

否则，截至今天，我找不到更好的解决方案来更新整个表或特定行，特别是在 cellEdit 事件成功后。 干杯！