Primefaces通過單擊按鈕單擊切換dataGrid元素的顏色

Question

我想通過單擊一個commandbutton來更改datgrid元素的背景顏色。我目前不知道如何做到這一點。

當我點擊下面的按鈕時，網格項目的元素被添加到列表中，我想將面板項目的顏色更改爲（例如黃色），以便用戶可以看到，此元素被標記。

<p:commandButton icon="ui-icon-pin-w" 
            action="#{cmsMarkedDocumentHandler.addDocument(_document)}"/> 

這是我的dataGrid的代碼。

<?xml version="1.0" encoding="UTF-8"?> 
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:m="http://java.sun.com/jsf/composite/components/mmnet"> 

    <h:form id="docDataGridForm"> 
     <p:dataGrid id="docDataGrid" 
       value="#{cmsDocumentSearchHandler.documentList}" 
       var="_document" 
       columns="2" 
       rows="10" 
       lazy="true" 
       paginator="true" 
       paginatorPosition="bottom" 
       paginatorAlwaysVisible="false" 
       paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" 
       rowsPerPageTemplate="5,10,15,20,25,50"> 

      <p:panel header="#{_document.shortName}" style="text-align:center"> 

       <h:panelGrid columns="2" style="width:100%" > 
        <p:outputLabel value="#{labels.name}" /> 
        <p:outputLabel value="#{_document.name}" /> 

        <p:outputLabel value="#{labels.dateiName}" /> 
        <p:outputLabel value="#{_document.fileName}"/> 

        <p:outputLabel value="#{labels.aenderungsDatum} #{labels.aenderer}" /> 
        <m:outputDateUser valueDate="#{_document.modDate}" valueUser="#{_document.modUser}" /> 

        <p:commandLink update=":eastPanel" title="#{labels.details}"> 
         <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" /> 
         <f:setPropertyActionListener value="#{_document}" target="#{documentHandler.entity}" /> 
        </p:commandLink> 

        <m:cmsDocumentVersionLinks value="#{_document}" newLine="true" showDate="true"></m:cmsDocumentVersionLinks> 

        <p:outputLabel value="#{labels.merken}"></p:outputLabel> 
        <p:commandButton icon="ui-icon-pin-w" 
            action="#{cmsMarkedDocumentHandler.addDocument(_document)}"/> 

       </h:panelGrid> 

      </p:panel> 
     </p:dataGrid> 
    </h:form> 

    <h:form id="createCmsDocument"> 
    <p:outputPanel rendered="#{documentCategoryHandler.entity != null}"> 
     <m:formButtons id="createCmSDocButton" 
         entity="#{documentHandler.entity}" 
         renderCreate="true" 
         renderAbort="false" 
         renderDelete="false" 
         renderSave="false" 
         actionCreate="#{documentHandler.create()}" 
         updateCreate=":contentPanel :eastPanel" 
         rendered="true"> 
     </m:formButtons> 
     </p:outputPanel> 
    </h:form> 


</ui:composition> 

Answer 1

我有類似的要求，所以我設計了這個解決方案。

在你cmsMarkedDocumentHandler類，用一個HashSet來跟蹤被點擊的內容：

private Set<Document> selectedDocuments = new HashSet<Document>(); 
    // this will hold the currently selected document 
    private Document document = new Document(); 

你addDocument將修改選中此HashSet的元素：

public void addDocument() { 
    // your other business logic 
    if(this.selectedDocuments.contains(document)) { 
     this.selectedDocuments.remove(document); 
    } else { 
     this.selectedDocuments.add(document); 
    } 
} 

需要一個新的方法來確定CSS類應用於網格中的當前元素：

public String getStyleClass(final Document document) { 
    if(this.selectedDocuments.contains(document)) { 
     return "documentSelected"; 
    } else { 
     return ""; 
    } 
} 

的primefaces代碼應該是這樣的：

<p:dataGrid id="docDataGrid" value="#{cmsMarkedDocumentHandler.documentList}" columns="7" var="_document"> 
    <p:panel id="document-#{document.id}" styleClass="#{cmsMarkedDocumentHandler.getStyleClass(_document)}"> 
     <p:commandLink process="@this" action="#{cmsMarkedDocumentHandler.addDocument}" value="Add Document" update="@parent"> 
      <f:setPropertyActionListener value="#{_document}" target="#{cmsMarkedDocumentHandler.document}" /> 
     </p:commandLink>          
    </p:panel> 
</p:dataGrid> 

當點擊commandLink，addDocument將把_document到HashSet的（或者，如果它已經存在刪除它），然後更新 commandLink的屬性將導致@parent刷新，其調用getStyleClass來應用適當的選定/未選擇的類。祝你好運！