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

时间:2010-12-10 11:38:54

标签: css jsf datatable

我正在尝试将特定的CSS类分配给<h:dataTable>的特定行。有没有办法访问和切割结果表行?

2 个答案:

答案 0 :(得分:5)

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

<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字符串进行完全的编程控制。请注意,上面只是一个启动示例,它不一定需要Item#getRowClass()左右。您甚至可以使用计数器进行简单的for循环。

E.g。

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

其中selectedList<Integer>。如果它包含1,2和5,则返回的字符串将如下所示,列出10个项目:

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

答案 1 :(得分:0)

我喜欢@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;
      }

  });
}