Как назначить пользовательский класс CSS для произвольных произвольных строк h: dataTable?

Question

Я пытаюсь назначить определенный класс CSS определенным строкам моего <h:dataTable>. Есть ли какой-нибудь способ получить доступ к результирующим строкам таблицы и вырезать их?

Answer 1

Свяжите атрибут 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();
}

---

Update , чтобы уточнить, таким образом, вы имеете полный программный контроль над строкой rowClasses.Обратите внимание, что вышеприведенный пример является лишь начальным примером, его необязательно получать с помощью 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

Answer 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;
      }

  });
}