基于选择菜单的 JSF 显示 PanelGrid 行/项目答案

【问题标题】：JSF Show PanelGrid row/items based on selectone menu基于选择菜单的 JSF 显示 PanelGrid 行/项目
【发布时间】：2015-09-17 14:46:20
【问题描述】：

我有一个提交表单，如果选择的关系是儿子或女儿，我想在输入出生日期的地方显示一行。

我终于可以开始工作了，但是使用<p:row> 感觉很笨拙和冗长，另外我无法让更新工作，除非我使用@form，然后需要在第一个/最后一个额外的 p:ajax>命名文本输入，因为如果在下拉列表中进行选择之前输入它们的值会消失。

这可行，但看起来很冗长

<h:form id="form2">
<p:panel header="Add a Non-Member">
<p:panelGrid>
    <p:row>
        <p:column>
            <h:outputLabel for="fname" value="First Name: " />
        </p:column>
        <p:column>
            <p:inputText id="fname" required="true"
                value="#{memberManager.newNonMember.first_name}" >
                <p:ajax update="@form" />
            </p:inputText>
        </p:column>
        <p:column>
            <p:message for="fname"></p:message>
        </p:column>
    </p:row>

    <p:row>
        <p:column>
            <h:outputLabel for="lname" value="Last Name: " />
        </p:column>
        <p:column>
            <p:inputText id="lname" required="true" 
                value="#{memberManager.newNonMember.last_name}" >
                <p:ajax update="@form" />
            </p:inputText>
        </p:column>
        <p:column>
            <p:message for="lname"></p:message>
        </p:column>
    </p:row>

    <p:row>
        <p:column>
            <h:outputText value="Relationship: " />
        </p:column>
        <p:column>
            <p:selectOneMenu id="relationship" value="#{memberManager.newNonMember.type}" required="True"
                requiredMessage="Relationship is required for non-member">
                <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
                <f:selectItems value="#{memberManager.relationTypes}" var="type" itemValue="#{type}" itemLabel="#{type.label}" />
                <p:ajax update="@form" />
            </p:selectOneMenu>
        </p:column>
        <p:column>
            <p:message for="relationship" />
        </p:column>
    </p:row>

    <p:row id="birthrow">
        <p:column>
            <h:outputLabel for="nm_birth_date" value="#{memberManager.newNonMember.type.label}'s Birthdate: "
                rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}" />
        </p:column>
        <p:column>
            <p:calendar id="nm_birth_date" showOn="button" navigator="true" value="#{memberManager.newNonMember.birth_date}"
                rendered="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
                required="#{memberManager.newNonMember.type.label == 'Son'|| memberManager.newNonMember.type.label == 'Daughter'}"
                pattern="MM/dd/yyyy" mask="true"
                requiredMessage="Your #{memberManager.newNonMember.type.label}'s Birthdate is required" />

        </p:column>
        <p:column>
            <p:message for="nm_birth_date"></p:message>
        </p:column>
    </p:row>

</p:panelGrid>
<br />

<p:commandButton value="Add" action="#{memberManager.addAction}" ajax="false" />
</p:panel>

</h:form>

当我保留 panelGrid 但仅在 selectOneMenu ajax 上使用了 update="birthrow" 并删除了 inputText ajax 时，生日行没有按预期更新，包括在表单提交后出现错误（即需要姓氏，然后ajax 更新停止工作）
- 最初我没有使用 p:row 或 p:column 而是使用面板网格上的 columns 属性。但是基于 BalusC 的 How to rendered <p:selectOneMenu>，我知道我需要一个包装器组件，这就是我选择 p:row 路线的原因。
- 但是有没有一种更简洁的方法可以不在文本输入中使用所有 p:rows 和额外的 ajax？

【问题讨论】：

标签： ajax jsf

【解决方案1】：

您可以将单个单元格包装在 <h:panelGroup> 中，而不需要所有 <p:row><p:column> 冗长。

<h:panelGroup id="birthdateLabel">
    <h:outputLabel ... />
</h:panelGroup>
<h:panelGroup id="birthdateInput">
    <p:calendar ... />
</h:panelGroup>
<p:message ... />

要更新它们，只需使用update="birthdateLabel birthdateInput"。

【讨论】：