Question

我想通过单击命令按钮来更改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的 update 属性将导致@parent刷新，调用< em> getStyleClass 以应用适当的选定/未选择的类。祝你好运！

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

1 个答案: