Question

我可以在表单中添加动态输入字段：

                <h:form>
                    <h:dataTable id="tblFields" value="#{templateOptionBean.fields}"
                        var="field">
                        <h:column>
                            <h:inputText value="#{field.value}" />
                        </h:column>

                        <h:column>
                            <h:commandButton value="Remove">
                                <f:ajax
                                    listener="#{templateOptionBean.onButtonRemoveFieldClick(field)}"
                                    immediate="true" render="@form" />
                            </h:commandButton>
                        </h:column>
                    </h:dataTable>

                    <h:commandButton value="Add">
                        <f:ajax listener="#{templateOptionBean.onButtonAddFieldClick}"
                            execute="@form" render="tblFields" />
                    </h:commandButton>
                </h:form>

我的后端看起来像那样：

    @ManagedBean
@ViewScoped
public class TemplateOptions implements Serializable
{
    private List<Field> m_lFields;

    public TemplateOptions()
    {
        m_lFields = new ArrayList();

        m_lFields.add(new Field());
    }

    public void setFields(List<Field> p_lFields)
    {
        m_lFields = p_lFields;
    }

    public List<Field> getFields()
    {
        return m_lFields;
    }

    public void onButtonRemoveFieldClick(final Field p_oField)
    {
        m_lFields.remove(p_oField);
    }

    public void onButtonAddFieldClick(AjaxBehaviorEvent p_oEvent)
    {
        m_lFields.add(new Field());
    }
}

然而，当我将表单中的按钮更改为p:commandButton时，我的逻辑不再起作用了。

但是，我想使用这些类型的按钮。因此，我该如何使用这种按钮？

我非常感谢你的回答!!!

Answer 1

如果您想使用像Primefaces这样的其他组件库，那么组件可能与其他组件不同。因此，如果您查看命令按钮的primefaces展示，您会看到如何轻松地在您的bean（http://www.primefaces.org/showcase/ui/pprPartialTree.jsf）上进行Ajax调用。因此，在您的情况下，更改bean和页面的两个内容。让我们从页面开始：

<p:commandButton value="Ajax Submit" update="tblFields" id="ajax"  
         actionListener="#{templateOptionBean.onButtonAddFieldClick}" />

使用primefaces你不需要f：ajax，你可以直接在命令按钮中使用它。

在bean中更改onButtonAddFieldClick方法。 Primefaces正在触发javax.faces.event.ActionEvent（参见showcase）所以改变它：

public void onButtonAddFieldClick(ActionEvent  p_oEvent)
{
    m_lFields.add(new Field());
}

并且可以使用p：commandButton

使用p：commandButton动态添加输入字段？

1 个答案: