Question

我有一个Primefaces Datatable，其中包含一些数据集，其中某一列的值为 0 或 1 -这些值用于计算{{3 }}。

我想做的是：

当值为 1 时，应显示summary row，数字 1 会被隐藏；
值 0 相同，但显示Font Awesome car 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
}

但是没有显示任何图标或图像，只有文字阴影：

airplane icon

有人知道我该怎么做吗？预先感谢。

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数据表中显示图标而不是数据？

1 个答案: