灰烬表甚至奇数颜色条

Question

在ember-table的表格行中添加偶数/奇数色条时卡住了。

普通CSS选择:even:odd将不能工作，因为懒惰表将重用现有的行元素的数量有限，所以在DOM第一元件可能无法在屏幕也不数据的阵列的第一行。

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

Answer 1

我找到了一种方法来做到这一点。

在表类，行属性

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