如何有条件地设置丰富的行：dataTable

Posted 2023-02-22

【中文标题】如何有条件地设置丰富的行：dataTable

【英文标题】：How to conditionally style a row in a rich:dataTable

【发布时间】：2010-11-01 03:04:20

【问题描述】：

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

谢谢

【参考方案1】：

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

这是一个我的值是布尔值的示例。 （rowkey 是每一行的索引，你必须在 rich:datatable 中这样设置：

rowKeyVar="rowkey"

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

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

CSS：

.found

background-color: #FACC2E;
   
.order-table-even-row

background-color: #FCFFFE;


.order-table-odd-row

background-color: #ECF3FE;

【讨论】：

我更喜欢这种简单的解决方案 +1

【参考方案2】：

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

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

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

【讨论】：

我不太喜欢这个，因为如果表格单元格之间有空格，背景颜色可能会透出来。此外，正如另一位用户在另一个线程中提到的那样，在 bean 中具有特定于显示的逻辑会很混乱。最好去掉getRowcolor()，在页面中使用三元运算符：styleClass="#approvals.selected == true ? 'row-highlight-color' : 'row-white-color' "

【参考方案3】：

使用 h:datatable 时，创建一个 bean 方法并调用它来确定样式。也许这也可以用于rich: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();
    

并在 .xhtml 中：

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

【讨论】：

最好不要在 bean 中包含特定于显示的代码。请改用三元运算符。在这个线程中查看我的other comment。此外，h:datatable 已经有用于奇数/偶数行样式的钩子，对吧？

【参考方案4】：

具体针对每一列：

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

【讨论】：

好答案。更好的是将此建议与accepted answer 结合起来，然后该样式可以应用于每一行一次。

【参考方案5】：

我已经使用 javascript 完成了一个混合解决方案。

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

然后在 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>

编辑：

这会添加一个带有渲染的条件 css 类：

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

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

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

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

【讨论】：

看起来很有趣：你能解释一下吗？我的意思是，我了解您将 'scduto' 和 'expired' 类放到

元素中，但要求在哪里为整行着色。我的意思是，由于列上没有条件，您如何根据 bean 上的值更改类？非常感谢:)

我已经编辑了帖子，现在清楚了吗？ :) 如果你愿意，我可以发布完整的源代码。

这不是不必要的复杂吗？解决原始问题不需要 JavaScript。

【参考方案6】：

我按照你已经提到的那样做，并将样式放在列上。

但是，您始终可以尝试将所有列包装在 <rich:columnGroup> 中，该 <rich:columnGroup> 应该输出 <tr> 并将您的条件样式放在上面。

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

例如。

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

【讨论】：

是的，这是一个很好的解决方案，但不幸的是它破坏了标题方面。有什么想法吗？

已尝试将标题放入列组，但未应用richfaces 皮肤。还有其他想法吗？非常感谢:)

附带说明，您也可以通过使用 redered 来隐藏列。

这似乎是一个完美的解决方案，然后我发现rich:columnGroup 没有class 或style 属性。

但是它有一个styleClass属性

【参考方案7】：

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

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

【讨论】：

除非您输入与行数一样多的类名，否则您将无法有条件地设置样式。

啊对不起，他希望每一行都有条件样式。我以为他想对所有行设置条件格式，但不想为所有列写条件