如何在rich：dataTable中有条件地设置行的样式

How can I change the style of a particular row based on a condition? I can use JSF EL in rich:column style class attribute, but I have to write for each column. I want to change the entire row.

如何根据条件更改特定行的样式?我可以在rich:column样式类属性中使用JSF EL,但我必须为每列编写。我想改变整行。

Thanks

7 个解决方案

#1

I do as you've already mentioned and put the style on the column.

我按照你已经提到过的方式将样式放在列上。

However you could always try wrapping all of your columns in a <rich:columnGroup> which is supposed to output a <tr> and place your conditional style on that.

但是,您总是可以尝试将所有列包装在 中,该列应该输出并将条件样式放在其上。

EDIT: (in response to comment): if the header facets in your columns are being broken then you can separate them into a column group as well. Should work - you may not even need the column group in the header??

编辑:(作为对评论的回应):如果列中的标题构面被破坏,那么您也可以将它们分成列组。应该工作 - 您可能甚至不需要标题中的列组?

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>

#2

Specifically for each column:

专门针对每一栏:

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

#3

This is my code, there is a checkbox on each row, if a checkbox is selected, the row is highlighted:

这是我的代码,每行都有一个复选框,如果选中了复选框,则突出显示该行:

<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 my backing bean:

在我的支持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
    }

#4

Use rowClasses ... You can set a nice zebra style for example, and set a particular color when your value is set to what you want :

使用rowClasses ...例如,您可以设置一个漂亮的斑马纹样式,并在您的值设置为您想要的值时设置特定的颜色:

Here an example where my value is a boolean. (rowkey is the index of each row, you have to set it as this in rich:datatable :

这是一个我的值是布尔值的例子。 (rowkey是每行的索引,你必须在rich:datatable中将其设置为:

rowKeyVar="rowkey"

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

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

I set Found class style when ma value == true.

当ma值== true时,我设置了Found类样式。

CSS:

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

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

#5

You can use the dataTables columnClasses and rowClasses properties.

您可以使用dataTables columnClasses和rowClasses属性。

That way you can produce the result which is shown here

这样你就可以产生这里显示的结果

#6

I've done an hybrid solution with Javascript.

我用Javascript做了一个混合解决方案。

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

and then in Javascript (with Prototype which is included in Richfaces)

然后在Javascript中(包含在Richfaces中的Prototype)

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

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

edit:

this add a conditional css class with rendered:

这添加了一个带渲染的条件css类:

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

with javascript I loop on every td with css class expired $$('td.expired') and add the same css class to the upper node tr with el.up().

使用javascript我在每个td上循环使用css class expired $$('td.expired')并使用el.up()将相同的css类添加到上层节点tr。

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

this simply runs the function when the DOM is fully loaded.

这只是在DOM完全加载时运行该函数。

#7

When using h:datatable, create a bean method and call this to determine the style. Perhaps this could also be done for a rich:datatable?

使用h:datatable时,创建一个bean方法并调用它来确定样式。也许这也可以用于富人:数据表?

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

and in the .xhtml:

并在.xhtml中:

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