JSF基于selectone菜单显示PanelGrid行/项

Question

我有一个提交表单，并希望显示一行，如果选择的关系是儿子或女儿，他们输入生日。

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

>

最初我没有使用p：row或p：column，而是使用面板网格上的columns属性。但是基于这个如何通过BalusC呈现 ，我知道我需要一个包装器组件，这就是为什么我使用p：row路由的原因。

但是，有没有一种更干净的方法可以不在文本输入上使用所有的p：rows和额外的ajax呢？

Answer 1

您可以将单个单元格包装在 中，而不需要所有的 冗长。

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

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