![](/img/trans.png)
[英]Updating entire <p:dataTable> on complete of <p:ajax event="cellEdit">
[英]Updating row on complete of <p:ajax event=“cellEdit”>
我想更新同一行中的cellValue。 我遵循了BalusC的建議, 在完成<p:ajax event =“ cellEdit”>之后更新整個<p:dataTable>
畢竟我的代碼執行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 。 如果我使用黑客程序,則會有2個請求和整頁重新加載。 必須有一個很小的錯別字或我忽略的東西。
這里的代碼沒有hack。
<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>
我使用event =“ rowEdit” ,這對我有用 。
<p:ajax event="rowEdit" listener="#{tableBean.onCellEdit}" oncomplete="updateTable()" />
遵循user3821232的注釋后,將替代方法與標准<p:ajax..
調用結合使用,而不是使用“ celleditor”“ inplace”。
在這里您可以看到解決方法。
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");
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.