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

Question

我有一个Primefaces Datatable containing some dataset which values are 0 or 1 in one of the columns - such values are used to calculate a 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

这很容易，我一直在我的代码中这样做。下面的示例显示了基于布尔值的灰色 "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>

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

How to display icon instead of data in Primefaces datatable?

css

primefaces