是否可以在PrimeFaces / JSF中將行動態添加到panelgrid（outputlabel，inputtext）？

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> ，並且表單的另一部分保持相同狀態，並且新字段會向下推其他領域。 我必須在應用程序的很多部分中使用它。 提前致謝。

Answer 1

您可以使用<ui:repeat>實現此功能，這是實現此功能的方式：

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

后備豆：

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;對象護照List<Nationality> nationalities;

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

具有參數index對象Nationality ，以存儲其索引，第一，第二，第三。

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

當然，您可以為您的任務找到更優雅的解決方案，但是需要使用<ui:repeat>標記。

請注意，我沒有測試此代碼，這只是應該如何實現此功能的一般想法。