So formatieren Sie eine Zeile in einem Rich-Format bedingt: dataTable

Question

Wie kann ich den Stil einer bestimmten Zeile basierend auf einer Bedingung ändern? Ich kann JSF EL im Attribut rich: column style class verwenden, aber ich muss für jede Spalte schreiben. Ich möchte die ganze Reihe ändern.

Dank

Answer 1

ich gezeigt, wie Sie bereits und den Stil auf der Säule gegeben erwähnt haben.

Sie könnten jedoch immer versuchen, alle Ihre Spalten in eine <rich:columnGroup>, die eine <tr> ausgeben soll, und legen Sie Ihre bedingten Stil darauf.

EDIT: (als Antwort auf Kommentar): Wenn die Header Facetten in Ihren Spalten gebrochen werden, dann können Sie sie auch in eine Spaltengruppe trennen. Sollte funktionieren - Sie brauchen nicht einmal die Spaltengruppe in der Kopfzeile ??

Eg.

<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

Sie die Eigenschaften Tables columnClasses und rowClasses verwenden können.

diese Weise können Sie das Ergebnis produzieren können, die here

Answer 3

Ich habe eine hybride Lösung mit Javascript gemacht.

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

und dann in Javascript (mit Prototype, die in Richfaces enthalten ist)

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

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

edit:

dies eine bedingte CSS-Klasse hinzufügen, mit gemacht:

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

mit Javascript Ich Schleife auf jedem td mit CSS-Klasse abgelaufen $$('td.expired') und fügen Sie die gleiche css-Klasse zum oberen Knoten tr mit el.up().

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

Dies führt einfach die Funktion aus, wenn das DOM vollständig geladen ist.

Answer 4

speziell für jede Spalte:

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

Answer 5

Bei Verwendung von h: Datentabelle, eine Bohne Verfahren erstellen und dies die Art zu bestimmen, nennen. Vielleicht könnte dies auch für einen reichen: Datatable getan werden?

 
    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(); 
    }

und in der.xhtml:

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

Answer 6

Dies ist mein Code, gibt es eine Checkbox auf jeder Zeile ist, wenn ein Kontrollkästchen aktiviert ist, wird die Zeile hervorgehoben:

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

In meinem Backing Bean:

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

Verwenden Sie rowClasses ... Sie können zum Beispiel einen schönen Zebra-Stil festlegen und einen bestimmten Co festlegen Oder wenn Ihr Wert auf das eingestellt ist, was Sie wollen:

Hier ein Beispiel, wo mein Wert ein Boolean ist. (RowKey ist der Index von jeder Zeile, haben Sie es als diese Einstellung vornehmen, in den reichen: Datentabelle:

rowKeyVar = "RowKey"

rowClasses = "# {myBean.is_validValue == false (RowKey mod 2 == 0 'bestellen-table-even-Reihe': 'bestellen-table-odd-Reihe'): 'gefunden'}“

ich habe gefunden Klasse Stil, wenn ma Wert == true .

CSS:

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

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