空白JSF不會呈現組件

Question

我有以下代碼：

<h:form id="mainForm"> 

     <p:panelGrid columns="2" layout="grid"> 

       <h:panelGroup styleClass="containers" layout="block"> 

        <p:outputLabel for="document" value="Document" /> 
        <p:inputText id="document" 
         value="#{dIGRCController.digrc.documento}" readonly="true" /> 
        <h:link styleClass="searchLink" value="Search Documents" 
         outcome="searchDigrc.xhtml"></h:link> 

        <!-- #{dIGRCController.digrc.impresn == 'S'} --> 
        <p:outputLabel for="concept" value="Concept" /> 
        <p:selectOneMenu id="concept" 
         value="#{dIGRCController.digrc.qconce}" 
         requiredMessage="You must select a Concept" required="true"> 

         <f:selectItem itemLabel="Select" itemValue="" /> 
         <f:selectItems 
          value="#{cCRX1Controller.ccrx1.concepts.entrySet()}" 
          var="concept" itemValue="#{concept.key}" 
          itemLabel="#{concept.value.tbdesc}" /> 

         <p:ajax listener="#{dIGRCController.setDropDownSelectedCcrx1}" 
          update="hiddenSections, searchAgentsLink, agenteName, documentValue, containerDocQty, containerMethodPayment" /> 

        </p:selectOneMenu> 

        <p:outputLabel for="todaysDate" value="Date" /> 
        <p:inputText id="todaysDate" readonly="true" 
         value="#{dIGRCController.digrc.fecha}" /> 
       </h:panelGroup> 

       <h:panelGroup styleClass="containers" layout="block"> 

        <h:panelGroup> 
         <p:outputLabel for="agenteName" value="Agent Name" /> 
         <p:inputText id="agenteName" 
          readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}" 
          value="#{dIGRCController.digrc.nombre}" required="true" 
          requiredMessage="You must enter an Agent Name" /> 
         <h:panelGroup id="searchAgentsLink"> 
          <h:link styleClass="searchLink" value="Search Agents" 
           rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}" 
           outcome="searchAgex1"> 

           <f:param name="concept" value="#{dIGRCController.digrc.qconce}" /> 

           <c:if test="#{not empty dIGRCController.digrc.documento}"> 
            <f:param name="documento" 
             value="#{dIGRCController.digrc.documento}" /> 
           </c:if> 

          </h:link> 
         </h:panelGroup> 
        </h:panelGroup> 

        <p:outputLabel for="documentValue" value="Document Value" /> 
        <p:inputText id="documentValue" 
         value="#{dIGRCController.digrc.documVal}" required="true" 
         requiredMessage="You must enter a Document Value" 
         validatorMessage="The Document Value must be greater than 0" 
         readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 9 or 
         dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1 or 
         dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'F'}"> 

         <f:validateDoubleRange minimum="0.01" /> 

         <p:ajax event="change" update="containerIdTwo"></p:ajax> 

        </p:inputText> 

        <h:panelGroup styleClass="containers" layout="block" 
         id="containerDocQty"> 
         <h:panelGroup 
          rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.pideqtysn == 'S'}"> 

          <p:outputLabel for="documentQuantity" value="Document Quantity" /> 
          <p:inputText id="documentQuantity" 
           value="#{dIGRCController.digrc.qtyDoc}" required="true" 
           requiredMessage="You must enter a Document Quantity" /> 

         </h:panelGroup> 
        </h:panelGroup> 

       </h:panelGroup> 

      </p:panelGrid> 

     <p:panelGrid columns="1" layout="grid" id="hiddenSections"> 

     <h:panelGroup styleClass="containers" layout="grid" id="moneyOrder" 
      rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1}"> 

      <h2>Money Orders</h2> 

      <p:outputLabel for="moneyOrdersQty" value="Quantity" /> 
      <p:inputText id="moneyOrdersQty" 
       value="#{dIGRCController.digrc.moqty}" /> 

      <p:outputLabel for="moneyOrdersVal" value="Value" /> 
      <p:inputText id="moneyOrdersVal" 
       value="#{dIGRCController.digrc.moval}"> 

       <p:ajax update="documentValue" event="change" 
        listener="#{dIGRCController.setDocValueToMoneyOrderValue()}" /> 

      </p:inputText> 

     </h:panelGroup> 

<h:panelGroup styleClass="containers" layout="block" 
        rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 8}"> 

        <h2>Transfer Documents</h2> 

        <p:outputLabel for="numeroConduce" value="Transfer Number" /> 
        <p:inputText id="numeroConduce" 
         value="#{dIGRCController.digrc.notransf}" required="true" 
         requiredMessage="You must enter a Number." /> 

        <p:outputLabel for="suplidor" value="Supplier" /> 
        <p:inputText id="suplidor" value="#{dIGRCController.digrc.c8supli}" 
         required="true" requiredMessage="You must enter a Supplier" /> 

        <p:outputLabel for="tipoEnvio" value="Type of Transfer" /> 
        <p:selectOneMenu id="tipoEnvio" 
         value="#{dIGRCController.digrc.c8tpenvio}" 
         requiredMessage="You must select a Type of Transfer" 
         required="true"> 

         <f:selectItem itemLabel="Select" itemValue="" /> 
         <f:selectItem itemLabel="Regular" itemValue="R" /> 
         <f:selectItem itemLabel="Official" itemValue="O" /> 
         <f:selectItem itemLabel="Express Regular" itemValue="E" /> 
         <f:selectItem itemLabel="Express Official" itemValue="F" /> 

         <p:ajax event="change" update="containerExtraEnvio"></p:ajax> 

        </p:selectOneMenu> 

        <p:outputLabel for="envioDestino" value="Destination" /> 
        <p:selectOneMenu id="envioDestino" 
         value="#{dIGRCController.digrc.c8destino}" 
         requiredMessage="You must select a Destination" required="true"> 

         <f:selectItem itemLabel="Select" itemValue="" /> 
         <f:selectItem itemLabel="Capital" itemValue="C" /> 
         <f:selectItem itemLabel="Interior" itemValue="I" /> 

        </p:selectOneMenu> 

        <h:panelGroup id="containerExtraEnvio"> 
         <h:panelGroup 
          rendered="#{dIGRCController.digrc.c8tpenvio == 'O' or dIGRCController.digrc.c8tpenvio == 'F'}"> 

          <p:outputLabel for="envioAdicionales" value="Extra" /> 
          <p:inputText id="envioAdicionales" 
           value="#{dIGRCController.digrc.c8qadi}" required="true" 
           requiredMessage="You must enter an Extra" /> 

         </h:panelGroup> 
        </h:panelGroup> 

       </h:panelGroup> 

     </p:panelGrid> 

    </h:form> 

第一panelGrid的內部，有一個下拉與ID 概念。當選擇一個項目時，這將更新容器ID hiddenSections。如果選擇的概念是1，那麼它應該顯示貨幣訂單。如果這個概念是8，它應該顯示轉移文檔（參見panelGrid id id hiddenSections）。

下圖顯示了內部爲空的七個DIV元素。爲了代碼清晰，我只展示了其中的兩個（如果你想，你應該能夠用兩個重現）。

這七個DIV元素代表了七個面板組，這些面板組在呈現上述條件時呈現。當用戶第一次進入屏幕時，它們都不會被渲染，因爲概念尚未設置。在這種情況下，我看到了我不想要的空白空間。我如何擺脫這些空的空間？

Answer 1

在這種情況下，我看到了，我不想空的空間。我如何擺脫這些空的空間？

你的問題含糊不清，我理解它3種方式（如果我誤解了答案，因爲答案在所有情況下都顯而易見）。

1. 當一個組件沒有被渲染時，它根本不會在html中形成。因此，如果空白空間表示空間字符，那麼這些空間字符就在標籤之外。
2. 如果生成的表格因爲CSS而佔用空間，那麼您希望該部分在頁面加載時爲空，那麼您可以使用渲染。
3. 我認爲你正在問的是：因爲你的selectItem最初是null，所以8個panelGroup都沒有被渲染，你希望默認的一個在所選項目爲null時被渲染。然後只包含一個檢查，以查看您的默認panelGroup的值是否爲空。

對不起，如果我誤解了這個問題。