wake-up-neo.com

So gestalten Sie eine Zeile in einer rich: dataTable bedingt

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

Vielen Dank

21
Luca Molteni

Ich mache, wie Sie bereits erwähnt haben, und lege den Stil in die Spalte.

Sie können jedoch immer versuchen, alle Ihre Spalten in einen <rich:columnGroup> zu packen, der einen <tr> ausgeben soll, und Ihren bedingten Stil darauf zu platzieren.

EDIT: (als Antwort auf Kommentar): Wenn die Kopfzeilenfacetten in Ihren Spalten beschädigt werden, können Sie sie auch in eine Spaltengruppe aufteilen. Sollte funktionieren - brauchen Sie nicht einmal die Spaltengruppe im Header?

Z.B.

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

Speziell für jede Spalte:

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

Dies ist mein Code. In jeder Zeile befindet sich ein Kontrollkästchen. 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 meiner Backbohne:

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
    }
3
Hong Lily Ju

Verwenden Sie rowClasses ... Sie können zum Beispiel einen Nice-Zebra-Stil festlegen und eine bestimmte Farbe festlegen, wenn Ihr Wert auf den gewünschten Wert eingestellt ist:

Hier ein Beispiel, bei dem mein Wert ein Boolean ist. (rowkey ist der Index jeder Zeile. Sie müssen ihn in rich: datable angeben: datable:

rowKeyVar = "rowkey"

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

Ich habe den Klassenstil gefunden, wenn ma value == true ist.

CSS:

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

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

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

Auf diese Weise können Sie das Ergebnis erzeugen, das hier angezeigt wird.

0
Chris Dale

Erstellen Sie bei Verwendung von h: datable eine Bean-Methode, und rufen Sie diese Methode auf, um den Stil zu bestimmen. Vielleicht könnte dies auch für ein reiches getan werden: datierbar?

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

0
Rose

Ich habe eine Hybridlö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 Prototyp, der 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>

bearbeiten:

dies fügt eine bedingte CSS-Klasse mit gerendert hinzu:

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

mit javascript Ich schleife auf jedem td mit der css-Klasse $$('td.expired') ab und füge die gleiche css-Klasse mit el.up() dem oberen Knoten tr hinzu.

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

dadurch wird die Funktion einfach ausgeführt, wenn das DOM vollständig geladen ist.

0
Luke