如何在不验证表单的情况下动态添加新行到p：dataTable？ [英] How to dynamically add new row to p:dataTable without validating the form?

问题描述

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

支持bean：

  @ManagedBean 
 @ViewScoped 
 public class ProductBean {
 
保护产品产品; 
 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 =blurrender =nameMessage/> 
< / p：inputText> 
< p：message id =nameMessagefor =name/> 
 
< p：dataTable id =pricesList...> 
< / p：dataTable> 
< p：commandButton value =Add another priceupdate =pricesListaction =＃{productBean.addNewPrice（）}/> 
< p：commandButton value =Submitaction =＃{productBean.submit}/> 
< / h：表格> 
  

第一个按钮添加另一个价格，它应该做些什么：添加一个新行到pricesList。但只有在表单有效的情况下（表单无效，如果没有设置产品名称）。

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

有没有什么建议可以实现我想要的功能？没有必要有一个按钮来解决我的问题。

解决方案

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

 < p：commandButton value =Add another priceprocess =@ thisupdate =pricesListaction =＃{productBean.addNewPrice（）}/> 
  

I'm developing a form for adding/editing product prices with JSF and PrimeFaces. A single product can have multiple prices depending on volume which is shown in a <p:dataTable>.

The backing 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);
  }

  // ...
}

The Facelet page:

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

The first button "Add another price" does, what it is supposed to do: Adding a new row to "pricesList". But only if form is valid (form is invalid, if product-name is not set).

My problem is, that I am having two commandButtons for the form, but I don't know how to get my wished functionallity without a commandButton. I tried a lot of ways: Changing the "Add another price" to a standard <p:button> with ajax-functionality; doesn't work because of buttons' outcome. I tried "type=button" for this button, but in this case simply nothing happens.

Are there any suggestions have to achieve my wished functionality? It is not necessary to have a button solving my problem.

解决方案

The <p:commandButton> submits and processes by default the entire form. This will indeed validate all input fields. You can control this with the process attribute which thus defaults to @form. In your particular case, you could just use @this so that only the command button's own action is invoked.

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

这篇关于如何在不验证表单的情况下动态添加新行到p：dataTable？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！