ember-table偶奇色条

Question

我在向 ember-table 中的 table 行添加 even/odd 色带时卡住了。

常规 CSS 选择器 :even :odd 将不起作用，因为惰性 table 将重用现有的有限数量的行元素，因此 [= 中的第一个元素23=] 可能不是屏幕上的第一行，也不是数据数组。

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

Answer 1

我找到了一种方法。

在Tableclass行属性

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

行classcomputedRowStyle方法

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中设置的任何值都会显示在行元素class中，所以只需要在CSS中添加两个样式ember-row-evenodd-even和ember-row-evenodd-odd

ember-table偶奇色条

ember-table even odd color strip

ember.js

ember-table