Problem mit Zurücksetzen von Datagrid in Primzahlen

Question

Ich bin neu in JSF und ich arbeite an einer Anwendung, wo eine Gruppe von Parametern in einem Datagrid hinzugefügt oder entfernt werden kann. Unten ist das Ausgangsniveau der Screenshot:

Wenn ich auf RemoveInvoice irgendeinen der bestehende Liste klicken, wird die Liste vorhanden, nachdem diese Box automatisch die Position der entfernten Liste nehmen. Aber in meinem Fall ein Leerabschnitt wird immer gemäß dem Screenshot unten angezeigt:

Mein JSF Code wie folgt aussieht:

<div class="listing_Table"> 
     <p:dataGrid columns="3" layout="grid" id="addInvoicePanel" 
      value="#{hrOrganizationPaymentDetailBean.invoiceDetailTOList}" 
      var="invoiceDetail"> 
      <p:panelGrid rendered="#{!invoiceDetail.delete}"> 
       <div class="Table"> 
        <div class="Row"> 
         <div class="Cell"> 
          <p:outputLabel> 
           <span class="redColor">*</span>InvoiceType:</p:outputLabel> 
         </div> 
         <div class="Cell"> 
          <p:selectOneMenu value="#{invoiceDetail.invoiceTypeID}" 
           filter="true" filterMatchMode="contains" required="true" 
           requiredMessage="InvoiceType is required"> 
           <f:selectItems 
            value="#{hrOrganizationPaymentDetailBean.newInvoiceTypeList}" 
            var="list" itemValue="#{list.typeId}" 
            itemLabel="#{list.type}" /> 
          </p:selectOneMenu> 
         </div> 
        </div> 
        <div class="Row"> 
         <div class="Cell"> 
          <p:outputLabel> 
           <span class="redColor">*</span>InvoiceNumber:</p:outputLabel> 
         </div> 
         <div class="Cell"> 
          <p:inputText value="#{invoiceDetail.invoiceNumber}" 
           required="true" requiredMessage="InvoiceNumber is required" /> 
         </div> 
        </div> 
        <div class="Row"> 
         <div class="Cell"> 
          <p:outputLabel> 
           <span class="redColor">*</span>InvoiceAmount:</p:outputLabel> 
         </div> 
         <div class="Cell"> 
          <p:inputText value="#{invoiceDetail.invoiceAmount}" 
           required="true" requiredMessage="InvoiceAmount is required"> 
           <f:convertNumber pattern="#0.00" /> 
          </p:inputText> 
         </div> 
        </div> 
        <div class="Row"> 
         <div class="Cell"> 
          <p:outputLabel>InvoicePath:</p:outputLabel> 
         </div> 
         <div class="Cell"> 
          <p:inputText value="#{invoiceDetail.invoicePath}" /> 
         </div> 
        </div> 
        <div class="Row"> 
         <div class="Cell"> 
          <p:outputLabel> 
           <span class="redColor">*</span>InvoiceDate:</p:outputLabel> 
         </div> 
         <div class="Cell"> 
          <p:calendar id="invoiceDate" 
           value="#{invoiceDetail.invoiceDate}" showOn="button" 
           readonlyInput="true" timeZone="IST" pattern="dd-MMM-yyyy" 
           required="true" requiredMessage="InvoiceDate is required" /> 
         </div> 
        </div> 
        <div class="Row"> 
         <div class="Cell"> 
          <p:outputLabel value="ServiceTax:" /> 
         </div> 
         <div class="Cell"> 
          <p:inputText value="#{invoiceDetail.serviceTax}"> 
           <f:convertNumber pattern="#0.00" /> 
          </p:inputText> 
         </div> 
        </div> 
        <div class="Row"> 
         <div class="Cell"> 
          <p:outputLabel value="TDS:" /> 
         </div> 
         <div class="Cell"> 
          <p:inputText value="#{invoiceDetail.tDS}"> 
           <f:convertNumber pattern="#0.00" /> 
          </p:inputText> 
         </div> 
        </div> 
        <div class="Row"> 
         <div class="Cell"></div> 
         <div class="Cell"> 
          <p:commandButton styleClass="Submit_button" 
           value="Remove Invoice" 
           action="#{hrOrganizationPaymentDetailController.removeInvoiceDetail(invoiceDetail)}" 
           update=":EditOrganizationPaymentDetailForm:addInvoicePanel" /> 
         </div> 
        </div> 
       </div> 
      </p:panelGrid> 
     </p:dataGrid> 
    </div> 

Und mein Backend Java-Code ist :

public void removeInvoiceDetail(InvoiceDetailTO invoiceDetailTO) 
{ 
    List<InvoiceDetailTO> invoiceDetailTOList = null; 
    List<Long> deletedInvoiceDetail = null; 
    try { 
     invoiceDetailTOList = hrOrganizationPaymentDetailBean.getInvoiceDetailTOList(); 
     deletedInvoiceDetail = hrOrganizationPaymentDetailBean.getDeletedInvoiceDetailID(); 
     if (deletedInvoiceDetail != null && !deletedInvoiceDetail.isEmpty()) { 
     } else { 
      deletedInvoiceDetail = new ArrayList<Long>(); 

     } 
     for (InvoiceDetailTO detailTO : invoiceDetailTOList) { 
      if ((detailTO.getInvoiceDetailID() != null && detailTO.getInvoiceDetailID().equals(invoiceDetailTO.getInvoiceDetailID())) 
        || (detailTO.getUniqueID() != null && detailTO.getUniqueID().equals(invoiceDetailTO.getUniqueID()))) { 
       detailTO.setDelete(true); 
       if (invoiceDetailTO.getInvoiceDetailID() != null) { 
        deletedInvoiceDetail.add(invoiceDetailTO.getInvoiceDetailID()); 
       } 
      } 
     } 

     hrOrganizationPaymentDetailBean.setInvoiceDetailTOList(invoiceDetailTOList); 
     hrOrganizationPaymentDetailBean.setDeletedInvoiceDetailID(deletedInvoiceDetail); 
    } catch (Exception e) { 
     LOGGER_.error("", e); 
    } 
} 

Bitte adv wo mache ich einen Fehler?

Answer 1

Das Problem ist in <p:panelGrid rendered="#{!invoiceDetail.delete}">. Selbst mit rendered="false" Zelle wird nicht von der HTML-Seite nach dem Rendern entfernt. Wenn Sie den Debugger in Ihrem Browser öffnen (drücken Sie F12 für Mozilla oder Chrome), finden Sie dort eine leere Zelle <td class="ui-datagrid-column"></td>. Sie müssen daher gelöschtes Element von Ihrem #{hrOrganizationPaymentDetailBean.invoiceDetailTOList} entfernen und DataGrid aktualisieren.