如何将自定义 CSS 类分配给 h:dataTable 的任意任意行？答案

【问题标题】：How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?如何将自定义 CSS 类分配给 h:dataTable 的任意任意行？
【发布时间】：2011-05-23 10:44:17
【问题描述】：

我正在尝试将特定的 CSS 类分配给我的 <h:dataTable> 的特定行。有什么方法可以访问和自定义生成的表格行吗？

【问题讨论】：

标签： css jsf datatable

【解决方案1】：

将rowClasses 属性绑定到返回所需CSS 类字符串的bean 属性。

<h:dataTable value="#{bean.list}" rowClasses="#{bean.rowClasses}">

例如

public String getRowClasses() {
    StringBuilder rowClasses = new StringBuilder();
    for (Item item : list) {
        if (rowClasses.length() > 0) rowClasses.append(",");
        rowClasses.append(item.getRowClass());
    }
    return rowClasses.toString();
}

更新澄清一下，这样您就可以完全以编程方式控制rowClasses 字符串。注意，以上只是一个kickoff示例，不一定需要通过Item#getRowClass()左右获取。您甚至可以在带有计数器的简单 for 循环中执行此操作。

例如

public String getRowClasses() {
    StringBuilder rowClasses = new StringBuilder();
    for (int i = 0; i < list.size(); i++) {
        if (rowClasses.length() > 0) rowClasses.append(",");
        rowClasses.append(selected.contains(i) ? "selected" : "none");
    }
    return rowClasses.toString();
}

其中selected 是List<Integer>。如果它包含 1、2 和 5，那么对于 10 个项目的列表，返回的字符串将如下所示：

none,selected,selected,none,none,selected,none,none,none,none

【讨论】：

谢谢BalusC，但我的意思是为单个特定行分配一个特定类：例如将 CSS 类“redRow”分配给第三行。 rowClasses 让我为所有行指定重复模式。
只要让第三个项目在getRowClass() 上返回redRow。或使用计数器并将redRow 附加到第三项。无论如何，您是否理解给定答案的重点？

【解决方案2】：

我喜欢@BalusC 的建议。如果您想要第二种选择，您可以使用 javascript/JQuery 轻松完成。

使用 JQuery 你可以这样做

(Note, this is just an example. I haven't tested it, and there is probably a better way of doing it)

$(document).ready(function(){
  var counter = 0;
  $('#myTable').each(function() {
      counter = counter + 1;
      if(counter==3) {
        $(this).addClass('redRow');
        return;
      }

  });
}

【讨论】：

只要$('#myTable tbody tr:eq(2)').addClass('redRow')也是可行的。