余烬表偶数奇数色条

Question

在ember-table中添加偶数/奇数色带到表行时卡住了。

常规CSS选择器:even :odd将不能工作，因为惰性表将重用现有的有限数量的行元素，所以DOM中的第一个元素可能不是屏幕上的第一行，也不是数据数组。

以前有人解决过这个问题吗?

Answer 1

我找到了一个方法。

在Table类中，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'),

In Row class computedRowStyle method

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两个样式