如何在不验证表单的情况下向 p:dataTable 动态添加新行？答案

【问题标题】：How to dynamically add new row to p:dataTable without validating the form?如何在不验证表单的情况下向 p:dataTable 动态添加新行？
【发布时间】：2012-09-24 19:41:10
【问题描述】：

我正在开发一个表单，用于使用 JSF 和 PrimeFaces 添加/编辑产品价格。单个产品可以有多个价格，具体取决于<p:dataTable> 中显示的数量。

支持 bean：

@ManagedBean
@ViewScoped
public class ProductBean {

  protected Product product;
  protected List<ProductPrice> productPrices;

  public void addNewPrice() {
    ProductPrice productPrice = new ProductPrice();
    productPrice.setPrice(new BigDecimal(0));
    this.productPrices.add(productPrice);
  }

  // ...
}

Facelet 页面：

<h:form id="productForm">
  <p:inputText value="#{productBean.product.name}" required="true">
    <f:ajax event="blur" render="nameMessage" />
  </p:inputText>
  <p:message id="nameMessage" for="name" />

  <p:dataTable id="pricesList" ...>
  </p:dataTable>
  <p:commandButton value="Add another price" update="pricesList" action="#{productBean.addNewPrice()}" />
  <p:commandButton value="Submit" action="#{productBean.submit}" />
</h:form>

第一个按钮“添加另一个价格”做了，它应该做的是：向“pricesList”添加一个新行。但仅当表单有效（如果未设置产品名称，表单无效）。

我的问题是，我有两个用于表单的命令按钮，但我不知道如何在没有命令按钮的情况下获得我想要的功能。我尝试了很多方法：将“添加另一个价格”更改为具有 ajax 功能的标准 <p:button>；由于按钮的结果而不起作用。我为这个按钮尝试了“type=button”，但在这种情况下根本没有任何反应。

是否有任何建议可以实现我想要的功能？不需要按钮来解决我的问题。

【问题讨论】：

标签： forms jsf primefaces

【解决方案1】：

<p:commandButton> 默认提交并处理整个表单。这确实会验证所有输入字段。您可以使用process 属性来控制它，因此默认为@form。在您的特定情况下，您可以只使用 @this 以便仅调用命令按钮自己的操作。

<p:commandButton value="Add another price" process="@this" update="pricesList" action="#{productBean.addNewPrice()}" />

【讨论】：

【解决方案2】：

使用 p:commandButton 动态添加行有什么问题？如果我理解您的问题是正确的，那么您显然需要向托管 bean 发出请求，以便将新行信息添加到数据表列表中。如果您对 p:commandButton 不满意，您可以随时选择 p:commandLink。对于编辑行数据，您可以使用 p:rowEditor 和 p:datatable。

check out the showcase example for datatable row editing

希望这会有所帮助:)

【讨论】：

这两个命令按钮本身不是问题。我的问题是，第一个应该只向数据表添加一个新行并刷新一个视图 ID，它就像一个普通的提交按钮。如果表单无效，则使用此按钮添加新行不起作用。如果表单有效，则该按钮只能工作一次。顺便说一句，使用 datatable 和 rowEditor 正是我想要做的。
@MarcusSchultö 欢迎来到 SO。 “如果表格无效”是什么意思？我在我的应用程序中做了你想做的事。当您单击“添加”按钮时，您将在支持 bean 中调用一个 actionListener，它将另一个 Row 对象（无论您的数据表行存储的内容）添加到您的数组列表（其中包含数据表行）。你能把你的代码贴在添加按钮后面吗？？
我更新了 sn-ps。如您所见，表单中有一个额外的 inputText“名称”。如果未设置名称，则表单无效并且不会添加新行。如果设置了名称，则会在“pricesList”中添加一个新行，但它只工作一次。
p:rowEditor 展示示例的 URL 不再有效。