灰燼表甚至奇數顏色條

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