[英]Is it possible to add row dynamically to panelgrid(outputlabel, inputtext) in PrimeFaces/JSF?
I have a <p:panelGrid>
like this: 我有一个
<p:panelGrid>
像这样:
<p:panelGrid style="margin:inherit !important; width: 100%;
display: flex !important;"
styleClass="new_player_panel">
<p:row>
<p:column>
<p:outputLabel value="Name in passport: " />
</p:column>
<p:column>
<p:inputText id="nameInPassport"
value="#{firstPlayerLoginManagedBean.surnameInPassport}"
required="true">
</p:inputText>
</p:column>
<p:column>
<p:message for="nameInPassport" display="icon" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Firstname in passport:" />
</p:column>
<p:column>
<p:inputText id="firstnameInPassport" label="Utazási"
value="#{firstPlayerLoginManagedBean.firstnameInPassport}"
required="true">
</p:inputText>
</p:column>
<p:column>
<p:message for="firstnameInPassport" display="icon" />
</p:column>
</p:row>
</p:panelGrid>
and so on. 等等。
I tried to create this with dataGrid(managedbean, inputfields in lists)
, but <p:dataGrid>
is not the perfect way to do my task exactly. 我试图用
dataGrid(managedbean, inputfields in lists)
创建它,但是<p:dataGrid>
并不是准确地完成任务的完美方法。 I want to get behavior like this: If I click the plus icon next to the nationality field then creates another <p:inputText>
for my second nationality and the other part of the form stay in the same state, and the new field push down the other fields. 我想要这样的行为:如果我单击国籍字段旁边的加号图标,然后为我的第二个国籍创建另一个
<p:inputText>
,并且表单的另一部分保持相同状态,并且新字段会向下推其他领域。 I have to use it a lot parts of my application. 我必须在应用程序的很多部分中使用它。 thanks in advance.
提前致谢。
You can use <ui:repeat>
to achieve this functionality, this is how you can achieve this functionality: 您可以使用
<ui:repeat>
实现此功能,这是实现此功能的方式:
*.xhtml page, you build nationality field dynamically after you press "Add Nationality" button. * .xhtml页面,您可以在按下“添加国籍”按钮后动态创建国籍字段。
<h:outputPanel id="nationality_container">
<ui:repeat value="#{bean.passport.nationalities}" var="nationality">
<h:outputLabel value="#{bean.getNationalyLabel(nationality)}"
<h:inputText value="#{nationality}"/>
</ui:repeat>
</h:outputPanel>
<h:commandButton value="Add Nationality" listener="#{bean.addNationality}" update="nationality_container"/>
Backing Bean: 后备豆:
public Bean{
private Passport passport;
//adding new nationality and set its index
public void addNationality(){ //adding new nationality and set its index
passport.getNationalities.add(new Nationality(passport.getNationalities.size()));
}
//this method return you appropriate label, for id = 1 it's "First Nationality", and so on
public String getNationalityLabel(Nationality nationality){
if(nationality.id == 1){
return "Nationality";
}else if(nationality.id == 2){
return "Second nationality";
}
...
}
} }
Object passport which encapsulates List<Nationality> nationalities;
包含
List<Nationality> nationalities;
对象护照List<Nationality> nationalities;
public Passport{
...
private List<Nationality> nationalities;
...
}
Object Nationality
with parameter index
to store its index, first, second, third. 具有参数
index
对象Nationality
,以存储其索引,第一,第二,第三。
public Nationality{
int index; //1,2,3... first, second, third nationality, etc...
String nationality;
public Nationality(int index){
this.index = index;
}
}
Of course you can find a more elegant solution for your task, but using <ui:repeat>
tag is required. 当然,您可以为您的任务找到更优雅的解决方案,但是需要使用
<ui:repeat>
标记。
Pay attention that I didn't test this code, this is only general idea how this functionality should be implemented. 请注意,我没有测试此代码,这只是应该如何实现此功能的一般想法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.