ember.js - ember-table 偶奇色条

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'),

在 Row 类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