空白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的值是否为空。

对不起，如果我误解了这个问题。