jsf - tablas - Cómo estilo condicionalmente una fila en un rico: dataTable

row select datatable primefaces

Question

¿Cómo puedo cambiar el estilo de una fila en particular según una condición? Puedo usar JSF EL en rich: atributo de clase de estilo de columna, pero tengo que escribir para cada columna. Quiero cambiar toda la fila.

Gracias

Answer 1

Al usar h: datatable, crea un método de bean y llámalo para determinar el estilo. Quizás esto también podría hacerse para un rico: ¿datatable?

public String getStyleSelectedOrderRows() { StringBuilder sb = new StringBuilder(); String[] oddEven = new String[]{"oddRow,", "evenRow,"}; int i = 0; for (MyObject object: myObjectList) { sb.append(object.isSelected() ? "selected," : oddEven[i++ % 2]); } return sb.toString(); }

y en .xhtml:

<h:dataTable rowClasses="#{bean.styleSelectedOrderRows}"

Answer 2

Específicamente para cada columna:

<rich:column styleClass="#{someBean.isSomething ? ''styleIfTrue'' : ''styleIfFalse'' }">

Answer 3

Este es mi código, hay una casilla de verificación en cada fila, si se selecciona una casilla de verificación, la fila se resalta:

<rich:dataTable value="#{manageOutstandingApprovals.approvalsResults}" var="approvals" styleClass="wp100 mtb20"  sortMode="single" id="approvalsTable"  
            enableContextMenu="false" selectionMode="none" reRender="actions" rows="10">

        <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.documentType}" sortOrder="#{manageOutstandingApprovals.documentTypeSort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.documentType'']}"/>
          </f:facet>
          <h:outputText  value="#{messages[approvals.documentType]}" id="col1"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.documentID}" sortOrder="#{manageOutstandingApprovals.documentIDSort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.documentID'']}"/>
          </f:facet>
          <h:outputText value="#{approvals.documentID}" id="col2"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="10%" sortBy="#{approvals.dateSubmitted}" sortOrder="#{manageOutstandingApprovals.dateSubmittedSort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.dateSubmitted'']}"/>
          </f:facet>
          <h:outputText value="#{approvals.dateSubmitted}" id="col3"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="15%" sortBy="#{approvals.submittedBy}" sortOrder="#{manageOutstandingApprovals.submittedBySort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.submittedBy'']}"/>
          </f:facet>
          <h:outputText value="#{approvals.submittedBy}"  id="col4"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="20%" sortBy="#{approvals.orgName}" sortOrder="#{manageOutstandingApprovals.organizationSort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.userOrg'']}"/>
          </f:facet>
          <h:outputText value="#{approvals.orgName}"  id="col5"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.value}" sortOrder="#{manageOutstandingApprovals.valueSort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.value'']}"/>
          </f:facet>
          <h:outputText value="#{approvals.value}"  id="col6"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="20%" sortBy="#{approvals.approverUserName}" sortOrder="#{manageOutstandingApprovals.approverSort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.approver'']}"/>
          </f:facet>
          <h:outputText value="#{approvals.approverUserName}" id="col7"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="15%" sortBy="#{approvals.dateAssigned}" sortOrder="#{manageOutstandingApprovals.assignedSort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.assigned'']}"/>
          </f:facet>
          <h:outputText value="#{approvals.dateAssigned}"  id="col8"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.dateOutstanding}"  sortOrder="#{manageOutstandingApprovals.numOutstandingSort}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.daysOutstanding'']}"/>
          </f:facet>
          <h:outputText value="#{approvals.dateOutstanding}"  id="col9"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}">
          <f:facet name="header">
            <h:outputText value="#{messages[''outstandingApprovals.selectButton'']}" title="#{messages[''outstandingApprovals.selectButtonTitle'']}"/>
          </f:facet>
          <h:selectBooleanCheckbox class="chkbx" value="#{approvals.selected}" id="selectBox" title="#{messages[''outstandingApprovals.selectButtonTitle'']}">
            <a:support event="onclick" ajaxSingle="true" reRender="approvalsTable" /> 
          </h:selectBooleanCheckbox>
        </rich:column>
      </rich:dataTable>

En mi bean de respaldo:

public String getRowcolor() {
    if (selected) // selected is a variable whose value is from the checkBox  
        return "row-highlight-color"; // css id
    else
        return "row-white-color"; // css id
    }

Answer 4

Hago lo que ya has mencionado y coloco el estilo en la columna.

Sin embargo, siempre puedes tratar de envolver todas tus columnas en un <rich:columnGroup> que se supone que <rich:columnGroup> un <tr> y colocarás tu estilo condicional sobre eso.

EDITAR: (en respuesta a los comentarios): si las facetas del encabezado en las columnas se están rompiendo, también puede separarlas en un grupo de columnas. Debería funcionar, es posible que ni siquiera necesite el grupo de columnas en el encabezado?

P.ej.

<rich:dataTable>
  <f:facet name="header">
    <rich:columnGroup>
      <rich:column>Header 1</rich:column>
      <rich:column>Header 1</rich:column>
    </rich:columnGroup>
  </f:facet>
  <rich:columnGroup>
    <rich:column>Data</rich:column>
    <rich:column>Data</rich:column>
  </rich:columnGroup>
</rich:dataTable>

Answer 5

He hecho una solución híbrida con Javascript.

<rich:column styleClass="expired" rendered="#{documento.expired}">
<f:facet name="header">
Da evadere entro
</f:facet>                  
<h:outputText value="#{documento.timeAgoInWords}" />
</rich:column>

y luego en Javascript (con Prototype que está incluido en Richfaces)

<script type="text/javascript">   
  function colorize() {    
    $$(''td.expired'').each(function(el) {
      el.up().addClassName(''expired'');      
    });
  }

  Event.observe(window, ''load'', function() {
    colorize();
  });
</script>

editar:

esto agrega una clase css condicional con prestados:

<rich:column styleClass="expired" rendered="#{documento.expired}">

con Javascript I loop en cada td con css class expired $$(''td.expired'') y agregue la misma clase css al nodo superior tr con el.up() .

Event.observe(window, ''load'', function() {});

esto simplemente ejecuta la función cuando el DOM está completamente cargado.

Answer 6

Puede usar las propiedades de las columnas dataTablesClasses y rowClasses.

De esa forma puedes producir el resultado que se muestra here

Answer 7

Use rowClasses ... Puede establecer un bonito estilo de cebra, por ejemplo, y establecer un color particular cuando su valor se establece en lo que desea:

Aquí un ejemplo donde mi valor es un booleano. (rowkey es el índice de cada fila, debe establecerlo así en rich: datatable:

rowKeyVar = "rowkey"

rowClasses = "# {myBean.is_validValue == false? (rowkey mod 2 == 0? ''order-table-even-row'': ''order-table-odd-row''): ''found''}"

Establecí el estilo de clase Found cuando ma value == true.

CSS:

.found
{
background-color: #FACC2E;
}   
.order-table-even-row
{
background-color: #FCFFFE;
}

.order-table-odd-row
{
background-color: #ECF3FE;
}