css - 如何在 Primefaces 数据表中显示图标而不是数据？

Question

我有一个 Primefaces Datatable包含一些数据集，其中一列的值为 0 或 1 - 这些值用于计算 summary row .

我想做的是:

• 当值为1时，一个Font Awesome car icon应该显示并且数字 1 被隐藏；
• 与值 0 相同，但显示 airplane icon .

到目前为止，我所取得的成就是使用条件 css:

<p:dataTable id="datalist"
             filteredValue="#taxiTripsController.filteredTaxiTrips}"
             value="#{taxiTripsController.items}"
             var="item"
             rowKey="#{item.id}"
             paginator="true"
             selectionMode="single"
             selection="#{taxiTripsController.selected}"
             widgetVar="txcwv" >

<!--some columns ommited -->

<p:column sortBy="#{item.cr1}" filterBy="#{item.cr1}" >
    <f:facet name="header">
        <h:outputText value="cr1"/>
    </f:facet>
    <h:outputText id="cr1" value="#{item.cr1}" styleClass="#{item.cr1 == 1 ? 'realizado' : null}" title="cr1" />
</p:column>

</p:dataTable>

CSS 摘录:

.realizado {
font: bold 2em/1.35 Arial;
text-shadow: 4px 4px 10px red;
icon:url("car.png"); <!-- or some way to use fa fa-car
}

但没有显示图标或图像，只有文本阴影:

有谁知道我该怎么做？提前致谢。

Answer 1

这很简单，我一直在我的代码中这样做。下面的示例显示了基于 bool 值的灰色“X”或绿色“Check”。

<p:column headerText="Boolean" sortBy="#{row.myYn}">
    <i class="fa #{row.myYn ? 'fa-check-circle' : 'fa-times'}" 
       style="color: #{row.myYn ? 'green': 'lightgray'}" />
</p:column>

所以在你的情况下，如果你使用的是 JSF 2.2，你可以在组件上做一个渲染标志，而不是你可以将一个渲染元素添加到 <i>喜欢...

<p:column headerText="Cars">
    <i class="fa fa-car" jsf:rendered="#{item.cr1 == 1}" />
</p:column>