Как отобразить значок вместо данных в Primefaces datatable? - PullRequest
0 голосов
/ 17 июня 2019

У меня есть Primefaces Datatable , содержащий некоторый набор данных со значениями 0 или 1 в одном из столбцов - такие значения используются для вычисления итоговая строка .

Что я хочу сделать:

До сих пор я достиг условное 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
}

Но значок или изображение не отображаются, только тень текста:

minimalist Datatable showing text shadow in cr1 column

Кто-нибудь знает, как мне это сделать?Заранее спасибо.

1 Ответ

3 голосов
/ 17 июня 2019

Это довольно легко, я делаю это все время в своем коде.В приведенном ниже примере показано либо серое «X», либо зеленая «проверка» на основе логического значения.

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...