CSS primefaces panelgrid在数据表中

I need to put a background colour in a panelgrid inside a datatable when a hover event is processed. I wrote this code and this css, but nothing happens. Any Idea how to solve this problem?

当处理悬停事件时,我需要在数据表中的panelgrid中放置背景颜色。我写了这段代码和这个CSS,但没有任何反应。任何想法如何解决这个问题?

<p:dataTable id="movementsTable" var="mov" value="#{movementsBacking.movements}" selectionMode="single" selection="#{movementsBacking.selectedMovement}" rowKey="#{mov.id}"
                           styleClass="nopadding " rowStyleClass="roteiroTable" style="margin: 0;" emptyMessage="#{text['list.empty']}" > 

            <p:ajax event="rowSelect" update=":#{cc.clientId}:movementPanel" oncomplete="PF('movementPanelVar').show()"  listener="#{movementsBacking.onSelect}"/>

            <p:column headerText="#{text['tasksbacking.tabRot']}" sortBy="#{mov.dataSent}">

                <p:panelGrid id="panelGridSelect" rendered="#{mov.isTreated()}" styleClass="borderless">
                    <p:row>
                        <p:column>
                            <h:outputLabel value="#{text['tasksbacking.roteiro.num']}" style="margin-right:5px;"/>
                            <h:outputText id="num" value="#{mov.number}"/>
                        </p:column>
                        <p:column>
                            <h:outputLabel value="#{text['tasksbacking.roteiro.data']}" style="margin-right:5px;"/> 
                            <h:outputText value="#{mov.dataSent}">
                                <f:convertDateTime pattern="dd-MM-yyyy"/> 
                            </h:outputText>
                        </p:column>
                    </p:row> 
                    <p:row>
                        <p:column>
                            <h:outputLabel value="#{text['tasksbacking.roteiro.de']}" style="margin-right:5px;"/>
                            <h:outputText value="#{mov.sender}" />
                        </p:column>
                        <p:column>
                            <h:outputLabel value="#{text['tasksbacking.roteiro.para']}" style="margin-right:5px;"/>
                            <h:outputText value=" #{mov.receiver}" />
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="2">
                            <!--<h:outputText value="#{text['tasksbacking.roteiro.resol']}"/>-->
                            <!--<h:outputText value="#{text['tasksbacking.true']}"/>-->
                            <h:outputLabel value="#{text['tasksbacking.roteiro.dataRes']}" style="margin-right:5px;"/> 
                            <h:outputText value="#{mov.resolutionDate}"> 
                                <f:convertDateTime pattern="dd-MM-yyyy" />
                            </h:outputText>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="2">
                            <h:outputLabel value="#{text['tasksbacking.registo.por']}" style="margin-right:5px;"/>
                            <h:outputText value="#{mov.resolutionUser.username}"/>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="2">
                            <h:outputLabel value="#{text['tasksbacking.roteiro.resolution']}" style="margin-right:5px;"/>
                            <h:outputText value="#{of:abbreviate(mov.resolution.resolution, 80)}"/>
                        </p:column>
                    </p:row>
                </p:panelGrid>

The css code:

css代码:

.roteiroTable, .roteiroTable th, .roteiroTable td {
    background-color: #F1F1F1 !important;
}

.nopadding, .nopadding th, .nopadding td {
    padding: 0 !important;
}

.borderless, .borderless tr, .borderless td {
    border: none !important;
}

1 个解决方案

#1

You should selection tr. The below code is an example.

你应该选择tr。以下代码就是一个例子。

<style>
    .rowStyleX tr{
        background-color: red !important;
    }
</style>
<h:form>
    <p:dataTable var="car" 
                 value="#{dtBasicView.cars}" 
                 rowStyleClass="rowStyleX">
        <p:column headerText="Id">
            <p:panelGrid>
                <p:row>
                    <p:column>
                        <h:outputText value="car id: " />
                    </p:column>
                    <p:column>
                        <h:outputText value="#{car.id}" />
                    </p:column>
                </p:row>
            </p:panelGrid>
        </p:column>

        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
</h:form>