Проблема с сбросом datagrid в праймерах

Question

Я новичок в JSF, и я работаю над приложением, в котором группа параметров, помещенных в datagrid, может быть добавлена ​​или удалена. Ниже приведен начальный уровень скриншоте:

Когда я нажимаю на RemoveInvoice любого из существующего списка, список присутствующая после этого блока должна автоматически занять позицию удаленного списка. Но в моем случае, пустой раздел становится отображается как на скриншоте ниже:

Мой JSF код выглядит следующим образом:

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

И мой бэкенд Java-код :

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); 
    } 
} 

Просим связаться с нами ise, где я делаю ошибку?

Answer 1

Проблема в <p:panelGrid rendered="#{!invoiceDetail.delete}">. Даже с rendered="false" ячейка не будет удалена с html-страницы после рендеринга. Если вы откроете отладчик в своем браузере (нажмите F12 для Mozilla или Chrome), вы можете найти пустую ячейку там <td class="ui-datagrid-column"></td>. Поэтому вам нужно удалить удаленный элемент из своего #{hrOrganizationPaymentDetailBean.invoiceDetailTOList} и обновить dataGrid.