Поверхность переключает цвет элемента DataGrid нажатием кнопки

Question

Я хотел бы изменить цвет фона элемента datgrid, щелкнув по кнопке commandbutton. На данный момент я понятия не имею, как это сделать.

Когда я нажимаю на следующую кнопку, элемент элемента сетки добавляется в список, и я хочу изменить цвет элемента панели на (например, желтый), чтобы пользователь мог видеть, этот элемент отмечается.

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

Это код для моих данныхGrid.

<?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, чтобы применить соответствующий выбранный/notselected класс. Удачи!