更新整个<p:dataTable>完成 <p:ajax event="cellEdit"> [英] Updating entire <p:dataTable> on complete of <p:ajax event="cellEdit">

问题描述

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

I am having difficulty re-rendering a PrimeFaces Datatable once a cell has been edited. Changing the value in one cell may change entries in the other cells, hence the need to refresh the entire table.

这是 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" 时，更改单元格值会删除屏幕上的数据表并且只呈现单元格内容(连同按钮)——我不明白为什么会这样.如果未指定更新属性，则表格会保留在屏幕上并更新活动单元格，但不会更新任何其他单元格(正如预期的那样).

When including update=":testForm:testContainer" within the cellEdit AJAX event, changing a cell value deletes the datatable on screen and only renders the cell content (along with the button) -- I do not understand why this is. When the update attribute is not specified, the table remains on screen with the active cell updated, but none of the other cells are updated (as to be expected).

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

The desired behaviour can be achieved (in a non-automated way) by not specifying the update attribute within the AJAX cellEdit event and clicking the Redisplay button after editing a cell's value. How can I achieve this in an automated way, and why does the update attribute not work as I expect?

我使用的是 PrimeFaces 4.0.

I am using PrimeFaces 4.0.

推荐答案

rowEdit 和 cellEdit 事件按设计在表内执行，不会更新/重新渲染任何其他内容比当前行，即使在 update 属性中明确指定时也不行.这是 PrimeFaces 有点过分热心地尝试最小化响应大小的结果.这在大多数情况下都有意义，但在您的情况下则不然.值得一个问题报告.

The rowEdit and cellEdit events does by design inside the table not update/re-render anything else than the current row, even not when explicitly specified in update attribute. It's the consequence of PrimeFaces' a bit overzealous attempt to minimize the response size. This makes sense in most of the cases, but not in specifically your case. It's worth an issue report.

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

In the meanwhile, until they fix this behavior, your best bet is using <p:remoteCommand> to invoke the desired listener method and perform a full update of the table.

重写

<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>

这篇关于更新整个<p:dataTable>完成 <p:ajax event="cellEdit">的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！