在jsf中使用selectonemenu的可见输入文本

时间:2014-08-08 10:02:41

标签: jsf-2

当用户从selectOneMenu中选择“Check”选项时,我希望'可见'bankName inputtext和chequeNumber输入文本,否则看不见。

<table border="1" id="invoiceData">
        <tr>
            <td valign="bottom" rowspan="6"><p:outputLabel
                    style="font-weight: bold;" value="Email" /><br /> <p:inputText
                    value="#{invoiceBean.email}" autocomplete="off" /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Invoice No" /><br /> <p:inputText
                    value="#{invoiceBean.invoiceNumber}" required="true"
                    label="Invoice Number" requiredMessage="Invoice Number Required" /></td>
            <td><p:outputLabel style="font-weight: bold;" value="Date" /><br />
                <p:calendar value="#{invoiceBean.date}" /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Delivery Note" /><br /> <p:inputText
                    value="#{invoiceBean.deliveryNote}" /></td>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Mode Of Payments" /><br /> 
                <p:selectOneMenu id="payments" value="#{invoiceBean.modeOfPayment}">
                    <f:selectItem itemLabel="Cash" itemValue="cash" />
                    <f:selectItem id="cheque" itemLabel="Cheque" itemValue="cheque" />
                </p:selectOneMenu>
                </td>

        </tr>

        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Bank Name" /><br /> <p:inputText
                    value="#{invoiceBean.bankName}" /></td>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Cheque Number" /><br /> <p:inputText
                    value="#{invoiceBean.chequeNumber}" /></td>
        </tr>

        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Supplier Ref." /><br /> <p:inputText
                    value="#{invoiceBean.supplierReference}" autocomplete="off" /></td>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Other References" /><br /> <p:inputText
                    value="#{invoiceBean.otherReference}" autocomplete="off" /></td>
        </tr>

        <tr>


        </tr>
        <tr>

        </tr>
        <tr>
            <td valign="top" rowspan="10"><p:outputLabel
                    style="font-weight: bold;" value="Buyer Address" /><br /> <p:inputTextarea
                    rows="12" /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Buyer Name" /><br /> <p:inputText
                    value="#{invoiceBean.buyerName}" autocomplete="off" /></td>
            <td><p:outputLabel style="font-weight: bold;" value="Date" /><br />
                <p:calendar /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Dispatch Document No" /><br /> <p:inputText
                    autocomplete="off" /></td>
            <td><p:outputLabel style="font-weight: bold;" value="Dated" /><br />
                <p:calendar value="#{invoiceBean.dispatchDocumentDate}" /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Dispatch Through" /><br /> <p:inputText
                    value="#{invoiceBean.dispatchThrough}" autocomplete="off" /></td>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Destination" /><br /> <p:inputText
                    value="#{invoiceBean.destination}" /></td>
        </tr>
        <tr>
            <td colspan="2"><p:outputLabel style="font-weight: bold;"
                    value="Terms Of Delivery" /><br /> <p:inputTextarea
                    value="#{invoiceBean.termsOfdelivery}" cols="43" /></td>
        </tr>
    </table>

当用户选择“检查”选项时,输入文本将可见,否则不可见。

1 个答案:

答案 0 :(得分:0)

解决方案使用SelectOneRedio标签,布局属性和添加panelGroup标签

<h:panelGroup id="inputs">
        <table border="1" id="invoiceData">
            <tr>
                <td valign="bottom" rowspan="6"><p:outputLabel
                        style="font-weight: bold;" value="Email" /><br /> <p:inputText
                        value="#{invoiceBean.email}" autocomplete="off" /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Invoice No" /><br /> <p:inputText
                        value="#{invoiceBean.invoiceNumber}" required="true"
                        label="Invoice Number" requiredMessage="Invoice Number Required" /></td>
                <td><p:outputLabel style="font-weight: bold;" value="Date" /><br />
                    <p:calendar value="#{invoiceBean.date}" /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Delivery Note" /><br /> <p:inputText
                        value="#{invoiceBean.deliveryNote}" /></td>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Mode Of Payments" />
                    <h:selectOneRadio value="#{invoiceBean.modeOfPayment}" layout="pageDirection">
                        <f:selectItem itemLabel="Cash" itemValue="cash" />
                        <f:selectItem itemLabel="Cheque" itemValue="cheque" />
                        <f:ajax render="inputs" />
                    </h:selectOneRadio><br /></td>

            </tr>

            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Bank Name" /><br /> <p:inputText
                        value="#{invoiceBean.bankName}"
                        disabled="#{invoiceBean.modeOfPayment == 'cash'}" /></td>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Cheque Number" /><br /> <p:inputText
                        value="#{invoiceBean.chequeNumber}"
                        disabled="#{invoiceBean.modeOfPayment == 'cash'}" /></td>
            </tr>

            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Supplier Ref." /><br /> <p:inputText
                        value="#{invoiceBean.supplierReference}" autocomplete="off" /></td>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Other References" /><br /> <p:inputText
                        value="#{invoiceBean.otherReference}" autocomplete="off" /></td>
            </tr>

            <tr>


            </tr>
            <tr>

            </tr>
            <tr>
                <td valign="top" rowspan="10"><p:outputLabel
                        style="font-weight: bold;" value="Buyer Address" /><br /> <p:inputTextarea
                        rows="12" /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Buyer Name" /><br /> <p:inputText
                        value="#{invoiceBean.buyerName}" autocomplete="off" /></td>
                <td><p:outputLabel style="font-weight: bold;" value="Date" /><br />
                    <p:calendar /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Dispatch Document No" /><br /> <p:inputText
                        autocomplete="off" /></td>
                <td><p:outputLabel style="font-weight: bold;" value="Dated" /><br />
                    <p:calendar value="#{invoiceBean.dispatchDocumentDate}" /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Dispatch Through" /><br /> <p:inputText
                        value="#{invoiceBean.dispatchThrough}" autocomplete="off" /></td>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Destination" /><br /> <p:inputText
                        value="#{invoiceBean.destination}" /></td>
            </tr>
            <tr>
                <td colspan="2"><p:outputLabel style="font-weight: bold;"
                        value="Terms Of Delivery" /><br /> <p:inputTextarea
                        value="#{invoiceBean.termsOfdelivery}" cols="43" /></td>
            </tr>
        </table>
    </h:panelGroup>