Тёмный столик чётного цвета

Question

Я застреваю при добавлении четных / нечетных цветных полос к строкам таблицы в ember-таблице.

Обычный селектор CSS :even:odd не будет работать, потому что ленивая таблица будет повторно использовать существующее ограниченное количество элементов строки, поэтому первый элемент в DOM может не быть первой строкой на экране или массивом данных.

Кто-нибудь решал эту проблему раньше?

Answer 1

Я нашел способ сделать это.

В табличном классе свойство rows

rows: Ember.computed(function() {
  var root = this.get('root');
  if (!root) {
    return Ember.A();
  }
  var rows = this.flattenTree(null, root, Ember.A());
  this.computeStyles(null, root);

  // start of modification
  // now each row has an 'isShowing' boolean flag
  // _.rest is underscore function to skip the first element
  // (in my case it is an empty TableRow instance)
  _.rest(rows).filterProperty('isShowing').forEach(function (row, i) {
    row.set('evenOdd', (i % 2 === 0) ? 'even' : 'odd');
  });
  // end of modification

  var maxGroupingLevel = Math.max.apply(rows.getEach('groupingLevel'));
  rows.forEach(function(row) {
    return row.computeRowStyle(maxGroupingLevel);
  });
  return rows;
}).property('root'),

В ряду computedRowStyle метод

computeRowStyle: function(maxLevels) {
  var level = this.getFormattingLevel(this.get('groupingLevel'), maxLevels);
  // start of modifications
  var evenOdd = this.get('evenOdd');
  this.set('rowStyle', 'ember-table-row-style-%@ ember-row-evenodd-%@'.fmt(level, evenOdd));
  // end of modifications
},

Какое бы значение не было установлено в rowStyle будет отображаться в классе элементов строки, поэтому нужно добавить еще два стиля в CSS ember-row-evenodd-even а также ember-row-evenodd-odd