Cómo aplicar un estilo condicional a una fila en un objeto rico: dataTable

Question

¿Cómo puedo cambiar el estilo de una fila determinada en función de 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

que hago como ya se ha mencionado y poner el estilo en la columna.

Sin embargo, siempre puede tratar de envolver todas sus columnas en un <rich:columnGroup> que se supone que debe generar un <tr> y colocar su estilo condicional sobre eso.

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

Por ejemplo.

<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 2

Puede utilizar las tablas de datos y propiedades columnClasses rowClasses.

esa manera se puede producir el resultado que se muestra here

Answer 3

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 prototipo que se incluye en RichFaces)

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

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

edición:

este agregar una clase css condicional con renderizada:

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

con javascript I loop en cada td con clase css expirada $$('td.expired') y agregue el la misma clase de 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 4

específicamente para cada columna:

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

Answer 5

Al utilizar h: tabla de datos, crear un método bean y llamar a este 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 el.XHTML:

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

Answer 6

Este es mi código, hay una casilla 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 7

Use filaClases ... Puede establecer un estilo de cebra agradable, por ejemplo, y establecer una co particular Para 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, hay que configurarlo como esto en rica: tabla de datos:?

rowKeyVar = "rowKey"

rowClasses = "# {myBean.is_validValue == false (rowKey mod 2 == 0 '-incluso- orden de fila de la tabla':? 'fin-table-extraña-row'): estilo de clase 'encontrado'}"

I SET que se encuentra cuando el valor ma == true

CSS:

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

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