Primefaces通过按钮单击切换dataGrid元素的颜色答案

【问题标题】：Primefaces toggle color of dataGrid element by button clickPrimefaces通过按钮单击切换dataGrid元素的颜色
【发布时间】：2013-07-12 07:33:24
【问题描述】：

我想通过单击命令按钮来更改 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>

【问题讨论】：

标签： jsf primefaces toggle background-color commandbutton

【解决方案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 的 update 属性将导致 @parent 刷新，它调用 getStyleClass 应用适当的选定/未选定类。祝你好运！

【讨论】：