<p：ajax event = "cellEdit">完了した行を更新する

Question

cellValueを同じ行に更新したいとします。 私はBalusCのsugestionsに従いました Updating entire <p:dataTable> on complete of <p:ajax event="cellEdit">

すべてのコードが2つのリクエストを実行した後。セカンド・ワンはフル・ページ・リロードを行い、すべてのデータがリセットされます。

また、この提案に続いて<p:remoteCommand name="updateTable" process="@this" update="kAbnrTbl" />を試しました。ここで Using a p:remoteCommand to update a p: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> 

そして、ここで豆：

@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 ...第2の要求を実行するのですか？バック開始位置まで

Primface 5.3：使用

。 <p:remoteCommand name="updateTable" update="kAbnrTbl" />ハックを使用しない場合は正常に動作しますが、refreshButtonを押す必要があります。 ハックを使用すると、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> 

Answer 1

user3821232から次の点に注意してください、この問題を回避するには、標準<p:ajax..コールと一緒に代わり「cellEditorを」「インプレース」を使用することです。

回避策を確認できます。

xthml：

<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"); 
} 

}

Answer 2

私は、これは私のために働いた、イベント= "rowEdit"を使用。

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