web-dev-qa-db-fra.com

Style de commentaire conditionnellement une ligne dans un riche: dataTable

Comment puis-je changer le style d'une ligne particulière en fonction d'une condition? Je peux utiliser JSF EL dans un attribut de classe rich: column style, mais je dois écrire pour chaque colonne. Je veux changer la ligne entière.

Merci

jsfseamrichfaces
21
Luca Molteni

Je fais comme vous l'avez déjà mentionné et mets le style sur la colonne.

Cependant, vous pouvez toujours essayer d'encapsuler toutes vos colonnes dans un <rich:columnGroup> qui est censé générer un <tr> et y placer votre style conditionnel.

EDIT: (en réponse au commentaire): si les facettes d'en-tête de vos colonnes sont cassées, vous pouvez également les séparer en un groupe de colonnes. Devrait-il fonctionner - vous n’avez peut-être même pas besoin du groupe de colonnes dans l’en-tête?

Par exemple.

<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

Spécifiquement pour chaque colonne:

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

Ceci est mon code, il y a une case à cocher sur chaque ligne, si une case est cochée, la ligne est en surbrillance:

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

Dans mon haricot:

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

Utilisez rowClasses ... Vous pouvez définir un style de zèbre de Nice par exemple, et définir une couleur particulière lorsque votre valeur est définie sur ce que vous voulez:

Voici un exemple où ma valeur est un booléen. (rowkey est l'index de chaque ligne, vous devez le définir comme ceci en rich: datatable:

rowKeyVar = "rowkey"

rowClasses = "# {myBean.is_validValue == false? (rowkey mod 2 == 0? [.________ "

J'ai défini le style de classe Found lorsque ma valeur == true.

CSS:

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

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

Vous pouvez utiliser les propriétés dataTables columnClasses et rowClasses. 

De cette façon, vous pouvez produire le résultat qui est montré ici

0
Chris Dale

Lorsque vous utilisez h: datatable, créez une méthode de bean et appelez-la pour déterminer le style. Cela pourrait peut-être aussi être fait pour un riche: 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();
    }

et dans le .xhtml: 

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

0
Rose

J'ai fait une solution hybride avec Javascript.

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

puis en Javascript (avec Prototype inclus dans Richfaces) 

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

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

modifier:

cela ajoute une classe css conditionnelle avec rendu:

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

avec javascript Je boucle sur chaque td avec la classe css expirée $$('td.expired') et ajoute la même classe css au noeud supérieur tr avec el.up().

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

cela lance simplement la fonction lorsque le DOM est complètement chargé.

0
Luke