我有以下PrimeFaces数据集:
<h:outputStylesheet name="/css/stocksStyle.css" />
<h:form id="mainForm">
<p:dataGrid id="prices" var="orderBooks" value="#{stocksView.latestPricesResults}" columns="3" rows="12">
<f:facet name="header">
WST 100
</f:facet>
<p:column>
<p:panel header="#{orderBooks.bidOrderId.member.memberId}" styleClass="#{stocksView.priceChange == 1 and stocksView.priceChangeMember == orderBooks.bidOrderId.member.memberId ? 'stockPriceHigher' : (stocksView.priceChange == -1 and stocksView.priceChangeMember == orderBooks.bidOrderId.member.memberId ? 'stockPriceLower' : 'black')}">
<h:panelGrid columns="1">
<h:outputText value="#{orderBooks.price}" >
<f:convertNumber type="currency" />
</h:outputText>
<h:outputText value="#{orderBooks.bidOrderId.member.party}" />
<h:outputText value="#{orderBooks.lastUpdate}" />
<h:panelGrid columns="2">
<p:commandLink update="buyDetail" oncomplete="PF('buyDialog').show()" title="Buy Detail">
<h:outputText value="Buy"/>
<f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
</p:commandLink>
<p:commandLink update="sellDetail" oncomplete="PF('sellDialog').show()" title="Sell Detail" rendered="#{stocksView.hasPortfolios[orderBooks.bidOrderId.member.memberId].booleanValue()}">
<h:outputText value="Sell"/>
<f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
</p:commandLink>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>我设定的背景颜色取决于价格是涨是降:
<p:panel header="#{orderBooks.bidOrderId.member.memberId}" styleClass="#{stocksView.priceChange == 1 and stocksView.priceChangeMember == orderBooks.bidOrderId.member.memberId ? 'stockPriceHigher' : (stocksView.priceChange == -1 and stocksView.priceChangeMember == orderBooks.bidOrderId.member.memberId ? 'stockPriceLower' : 'black')}">但是,对于面板,我有更具体的CSS,这意味着组件的背景没有正确更改,我只能在组件的大纲中看到它。这是我的CSS:
.ui-panel.ui-widget.ui-widget-content.ui-corner-all {
border-radius: 0;
}
.ui-panel-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-all{
background: #666666;
border-radius: 0;
}
.ui-panel-content.ui-widget-content{
background: #000000
}
.ui-datagrid-header.ui-widget-header.ui-corner-top{
background: #666666;
border-radius: 0;
}
body .stockPriceLower{
background: red;
}
body .stockPriceHigher{
background: green;
}因此,不知何故,我需要stockPriceHigher来覆盖stockPriceHigher,但我不知道如何让它工作。
发布于 2020-08-04 17:07:03
如果我正确理解,您需要覆盖面板标题的背景。由于您在p:panel标记中定义了一个自定义类,这将附加到父组件中。您可以在css中定义以下内容:
.stockPriceHigher .ui-panel-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-all {
background: green;
}这将覆盖前面的选择器。
.ui-panel-titlebar.ui-widget-header.ui-helper-clearfix.ui-corner-all{
background: #666666;
border-radius: 0;
}https://stackoverflow.com/questions/63251291
复制相似问题