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

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

---

谢谢

您可以使用dataTables columnClasses和rowClasses属性

---

这样，您就可以生成显示的结果

我会按照您刚才提到的那样做，并将样式放在列中

但是，您可以尝试将所有列包装在一个

中，该列应该输出一个

，并将您的条件样式放在该列上

编辑：（回应评论）：如果列中的标题面被破坏，那么您也可以将它们分离到列组中。应该有效-您甚至可能不需要标题中的列组

例如

标题1
标题1
资料
资料

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

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

---

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

特别针对每一列：

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

---

使用h:datatable时，创建一个bean方法并调用它来确定样式。也许对于rich:datatable也可以这样做

公共字符串getStyleSelectedOrderRows（）{
StringBuilder sb=新的StringBuilder（）；
字符串[]odd偶数=新字符串[]{“oddRow，”，“evenRow，”}；
int i=0；
用于（MyObject对象：MyObject列表）{
sb.append（object.isSelected（）？“selected，”：odd偶数[i++%2]）；
}
使某人返回字符串（）；
}

在.xhtml中：

这是我的代码，每行上都有一个复选框，如果选中复选框，则该行将高亮显示：

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

使用行类。。。
例如，可以设置漂亮的斑马样式，并在值设置为所需时设置特定颜色：

这里是一个示例，其中我的值是布尔值。（rowkey是每行的索引，您必须在rich:datatable:

rowKeyVar=“rowkey”

rowClasses=“#{myBean.u有效值==false吗？（rowkey mod 2==0？
“订单表偶数行”：“订单表奇数行”）：“已找到”}

当ma value==true时，我设置了Found类样式

CSS:

这不允许你有条件地设置样式，除非你输入尽可能多的类名，因为你有行。啊，我很抱歉，他想要在每一行上设置条件样式。我以为他想在所有行上设置条件格式，但不想为所有列写条件。这是一个很好的解决方案，但不幸的是，它是错误的aks标题方面。有想法吗？已经尝试将标题放入列组中，但没有应用richfaces蒙皮。还有其他想法吗？非常感谢：）作为旁注，您也可以使用Reded以这种方式隐藏列。这似乎是一个完美的解决方案，然后我发现
rich:columnGroup
没有
class
或
style
属性。但是它有一个styleClass属性。ems有趣的是：你能解释一下吗？我的意思是，我理解您将“scaduto”和“expired”类放在元素中，但是要求在哪里给整行着色。我的意思是，由于列上没有条件，如何基于bean上的值更改类？非常感谢：）我已经编辑了这篇文章，现在清楚了吗？：）如果你愿意，我可以发布完整的源代码。这不是不必要的复杂吗？解决最初的问题不需要JavaScript，我不太喜欢这样，因为如果表格单元格之间有空格，背景颜色可能会显示出来。另外，正如另一个用户在另一个线程中提到的，bean中有很多杂乱的显示特定的逻辑。最好删除
getRowcolor（）
并在页面中使用三元运算符：
styleClass=“#{approvals.selected==true？”行高亮显示颜色“：“行白色”}”
最好不要在bean中显示特定的代码。改用三元运算符。在这个帖子里看到我的名字。另外，
h:datatable
已经有了奇偶行样式的挂钩，对吗？回答得好。更好的方法是将此建议与，然后样式可以应用于每行一次。我更喜欢这种简单的解决方案+1
<rich:column styleClass="expired" rendered="#{documento.expired}">

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

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

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();
    }
<h:dataTable rowClasses="#{bean.styleSelectedOrderRows}"
<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>

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
    }

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

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