プライムフェイスのDataGridをリセットする際の問題

Question

私はJSFを初めて使用しており、データグリッドに配置されたパラメータのグループを追加または削除できるアプリケーションで作業しています。私は既存のリストのいずれかのRemoveInvoiceをクリックすると、そのボックスの後にリストの存在を自動的に削除リストの位置を取るべき

：下記のスクリーンショットの初期レベルです。しかし、私の場合は、空白部分は、以下のスクリーンショットごとに表示なっている：

<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コードは次のとおりです。

私のJSFコードは次のようになります：

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

Please adv私は間違いを犯していますか？

Answer 1

問題は<p:panelGrid rendered="#{!invoiceDetail.delete}">です。 rendered="false"であっても、レンダリング後にhtmlページからセルは削除されません。ブラウザでデバッガを開くと（MozillaまたはChromeの場合はF12を押してください）、そこに空のセルがあります<td class="ui-datagrid-column"></td>。だから、#{hrOrganizationPaymentDetailBean.invoiceDetailTOList}から削除したアイテムを削除し、dataGridを更新する必要があります。