是否可以在 PrimeFaces/JSF 中动态添加行到 panelgrid(outputlabel, inputtext)？答案

【问题标题】：Is it possible to add row dynamically to panelgrid(outputlabel, inputtext) in PrimeFaces/JSF?是否可以在 PrimeFaces/JSF 中动态添加行到 panelgrid(outputlabel, inputtext)？
【发布时间】：2015-01-10 03:06:36
【问题描述】：

我有一个这样的<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> 并且表单的其他部分保持相同的状态，并且新字段向下推另一个字段。我必须在我的应用程序的很多部分使用它。提前致谢。

【问题讨论】：

您在给定的 XHTML 代码 sn-p 中显示了 <p:panelGrid>，但文本暗示了 <p:dataGrid>。标题也与问题主体有些矛盾。这更有可能与组件的条件渲染有关，而不是动态添加组件本身。
我只是想说明它应该如何工作，并打印测试数据网格。 panelgrid 使用行和列来显示输出文本-输入文本对。我尝试使用渲染属性，但它没有以相同的形式呈现。

标签： jsf jsf-2 primefaces datagrid

【解决方案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"/>

支持 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> 标签。

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

【讨论】：

你将<ui:param> 与<ui:repeat> 混合在一起。