0

Tengo un problema que no puedo resolver.

Un componente <p:dataTable> de Primefaces renderiza una tabla HTML en el navegador, lo que necesito es poner un color de fondo al elemento <td> de la tabla HTML, esto por cuestiones de diseño cada celda representa un elemento que tiene un estado que se identifica con un color (verde, amarillo, café, rojo).

La página es la siguiente

<p:dataTable var="categoria" value="#{divisionBean.categorias}" styleClass="tablaP8TPrime">
    <f:facet name="header">
        Alimentos
    </f:facet>
    <p:column headerText="Categoría">
        <h:outputText value="#{categoria.nombre}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna1}">
        <h:panelGroup id="celda" layout="block">
            <h:outputText value="#{categoria.automovil.get(0).getNombre()}" />
        </h:panelGroup>
    </p:column>
    <p:column headerText="#{divisionBean.columna2}">
        <h:outputText value="#{categoria.automovil.get(1).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna3}">
        <h:outputText value="#{categoria.automovil.get(2).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna4}">
        <h:outputText value="#{categoria.automovil.get(3).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna5}">
        <h:outputText value="#{categoria.automovil.get(4).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna6}">
        <h:outputText value="#{categoria.automovil.get(5).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna7}">
        <h:outputText value="#{categoria.automovil.get(6).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna8}">
        <h:outputText value="#{categoria.automovil.get(7).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna9}">
        <h:outputText value="#{categoria.automovil.get(8).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna10}">
        <h:outputText value="#{categoria.automovil.get(9).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna11}">
        <h:outputText value="#{categoria.automovil.get(10).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna12}">
        <h:outputText value="#{categoria.automovil.get(11).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna13}">
        <h:outputText value="#{categoria.automovil.get(12).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna14}">
        <h:outputText value="#{categoria.automovil.get(13).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna15}">
        <h:outputText value="#{categoria.automovil.get(14).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna16}">
        <h:outputText value="#{categoria.automovil.get(15).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna17}">
        <h:outputText value="#{categoria.automovil.get(16).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna18}">
        <h:outputText value="#{categoria.automovil.get(17).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna19}">
        <h:outputText value="#{categoria.automovil.get(18).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna20}">
        <h:outputText value="#{categoria.automovil.get(19).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna21}">
        <h:outputText value="#{categoria.automovil.get(20).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna22}">
        <h:outputText value="#{categoria.automovil.get(21).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna23}">
        <h:outputText value="#{categoria.automovil.get(22).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna24}">
        <h:outputText value="#{categoria.automovil.get(23).getNombre()}" />
    </p:column>
</p:dataTable>

Los datos se llenan correctamente, ahora lo que necesito es poner dichos colores.

1
  • ¿Cuál celda necesitas poner el color? ¿Y de acuerdo a qué cambiará el color?
    – Garrizano
    el 21 dic. 2016 a las 17:03

1 respuesta 1

0

No me queda claro si hablas de una celda en cualquier columna o sólo las celdas de una columna. En cualquier caso, puedes usar una expresión en EL en el atributo styleClass de cada columna:

<p:column headerText="#{divisionBean.columna1}" styleClass="#{categoria.automovil.get(0).getNombre() eq 'Blanco' ? 'estiloBlanco' : 'estiloNegro'}">

En tu caso, con cuatro posibles valores y con una EL tan larga, te sugeriría que añadieras una propiedad al bean (por ejemplo, getEstiloColumna), para poner allí la lógica de qué estilo usar. También puedes definir una función de JSTL, para hacer eso mismo, si te va mejor.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.