Question

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

等等。

我尝试使用dataGrid(managedbean, inputfields in lists)创建此内容，但<p:dataGrid>并不是完全执行任务的完美方式。我希望得到这样的行为：如果我点击国籍字段旁边的加号图标，则为我的第二个国籍创建另一个<p:inputText>，并且表单的另一部分保持相同状态，并且新字段按下其他领域。我必须在应用程序的很多部分使用它。提前谢谢。

a busy cat

Answer 1

您可以使用<ui:repeat>来实现此功能，这是您实现此功能的方法：

*。xhtml页面，按下＆＃34;添加国籍后，动态建立国籍字段＆＃34;按钮。

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

支持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";
   }
   ...
}

}

封装List<Nationality> nationalities;

的对象护照

public Passport{
    ...
    private List<Nationality> nationalities;
    ...
}

对象Nationality，参数index用于存储其索引，第一，第二，第三。

public Nationality{
    int index; //1,2,3... first, second, third nationality, etc...
    String nationality;
    public Nationality(int index){
        this.index = index;
    }
}

当然，您可以为您的任务找到更优雅的解决方案，但需要使用<ui:repeat>标记。

请注意我没有测试此代码，这只是一般性的想法，应该如何实现此功能。

是否可以在PrimeFaces / JSF中动态地向行添加行（outputlabel，inputtext）？

1 个答案: