0

我想在同一行更新 cellValue。我按照 BalusC 的建议 更新整个 <p:dataTable> 完成 <p:ajax event="cellEdit">

毕竟我的代码执行了 2 个请求。第二个进行整页重新加载，所有数据都将重置。

我也尝试<p:remoteCommand name="updateTable" process="@this" update="kAbnrTbl" />遵循这个建议。 使用 ap:remoteCommand 更新 ap:dataTable

这是JSF页面：

<h:form id="kalkEditForm">
        <p:outputPanel id="dropArea">
            <p:remoteCommand name="updateTable" update="kAbnrTbl" />
            <p:dataTable id="kAbnrTbl" value="#{tableBean.data}" var="data" editable="true" editMode="cell">

                <p:ajax event="cellEdit"  listener="#{tableBean.onCellEdit}" oncomplete="updateTable()"/> 

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

                <p:column headerText="Col2">
                    <h:outputText value="#{data.col2}" />
                </p:column>
           </p:dataTable>   
        </p:outputPanel>
</h:form>

这里是 Bean： 

    @ManagedBean(name="tableBean")
    @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 final ArrayList<RowData> entries = new ArrayList<RowData>();

public List<RowData> getData() {
    return entries;
}

public void onCellEdit(CellEditEvent event) {
    final DataTable dataTable = (DataTable)event.getComponent();
    RowData data = (RowData) dataTable.getRowData();
    data.setCol2("changed");
  }

}

我不知道代码有什么问题。为什么要执行<p:remoteCommand ...第二个请求。

使用：Primface 5.3

回到起点。如果我不使用<p:remoteCommand name="updateTable" update="kAbnrTbl" />hack，它可以正常工作，但我必须按下refreshButton。如果我使用 hack 我有 2 个请求和一个完整的页面重新加载。一定有一个小错字或我忽略的东西。

这里的代码没有破解。

<h:form id="kalkEditForm">
        <p:outputPanel id="dropArea">
            <!-- <p:remoteCommand name="updateTable" update="kAbnrTbl" /> -->
            <p:dataTable id="kAbnrTbl" value="#{tableBean.data}" var="data" editable="true" editMode="cell">
                <p:ajax event="cellEdit"  listener="#{tableBean.onCellEdit}" update="kAbnrTbl"/>
                <!-- <p:ajax event="cellEdit"  listener="#{tableBean.onCellEdit}" oncomplete="updateTable()"/> -->
                <p:column headerText="Col1">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{data.col1}" /></f:facet>
                        <f:facet name="input"><p:inputText value="#{data.col1}" /></f:facet>
                    </p:cellEditor>  
                </p:column>
                <p:column headerText="Col2">
                    <h:outputText value="#{data.col2}" />
                </p:column>
           </p:dataTable>   
        </p:outputPanel>
         <p:commandButton id="refreshButton" value="Redisplay" update="kAbnrTbl" />
    </h:form>
4

2 回答 2

0

我使用了 event="rowEdit"，这对我有用。

<p:ajax event="rowEdit" listener="#{tableBean.onCellEdit}" oncomplete="updateTable()" />
于 2017-01-05T16:21:51.470 回答
0

根据 user3821232 的说明，解决方法将与标准<p:ajax..调用一起使用，而不是“celleditor”“inplace”。

在这里您可以看到解决方法。

xml:

<h:form id="kalkEditForm">
        <p:outputPanel id="dropArea">
            <p:dataTable id="kAbnrTbl" value="#{tableBean.data}" var="data" editable="true" editMode="cell" rowIndexVar="row">
                <p:column headerText="Col1" id="col1" sortBy="#{data.col1}" sortable="true">
                    <p:inplace>
                        <f:facet name="output"><h:outputText value="#{data.col1}" /></f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{data.col1}" > 
                                <p:ajax event="blur" process="@this" listener="#{tableBean.updateData(row, 'col1')}" update="kAbnrTbl"/>
                            </p:inputText>  
                        </f:facet>
                    </p:inplace>
                </p:column>
                <p:column headerText="Col2">
                    <h:outputText id="col2" value="#{data.col2}" />
                </p:column>
           </p:dataTable>   
        </p:outputPanel>
    </h:form>

豆：

@ManagedBean(name="tableBean")
@ViewScoped
public class TableBean {

private static final Logger logger = Logger.getLogger(TableBean.class);

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 final ArrayList<RowData> entries = new ArrayList<RowData>();

public List<RowData> getData() {
    return entries;
}

public void updateData(Integer row, String colName){
    logger.debug(String.format("updateData called row:%d colName %s", row, colName));
    RowData data = getData().get(row);
    data.setCol2("changed");
}

}

于 2017-01-11T10:47:17.123 回答