Question

在向ember-table中的表格行添加偶数/奇数色条时，我遇到了问题。

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

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

Answer 1

我找到了一种方法。

在Table类中，rows属性

rows: Ember.computed(function() {
  var root = this.get(&#39;root&#39;);
  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(&#39;groupingLevel&#39;), 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

中再添加两个样式

余烬表甚至奇怪的颜色条

1 个答案: