控制网格中子单元格值的背景颜色

Question

我有一个4列的栅格，如下所示：

gridColumns: function() {
    return [{
            "field": "Column1",
            "label": Column1
        }, {
            "field": "Column2",
            "label": Column2
        }, {
            "field": "Column3",
            "label": Column3
        }, {
            "field": "Column4",
            "label": Column4,
            "sortable": false,
            "renderCell" : function(object, value, node) {
                if(value.length > 1){
                    for ( var i = 0; i < value.length; i++) {
                        domConstruct.create("div", {
                            "innerHTML" : value[i]
                        }, node);
                    }
                    return;
                }
                return document.createTextNode(value);
            }
        }];
},

如您所见，Column4 cell可以有多个值，因此我重写renderCell以遍历这些值并将它们输出到单元格内的新行中。

这很好。

但是，所有3个值的背景色都与该行的背景色相同。因此，如果该行是灰色或白色（取决于其奇数还是偶数），则单元格背景是灰色或白色。

我也如何对这些“子值”执行相同的操作？

我想要的行为是：如果该行的背景色应为第一个值的背景色，并在第二个值中替代颜色，则在第三个值中再次为第一个颜色，依此类推。我不在乎最后一个值的背景颜色是否与下一行的颜色相同。我只想替换值的颜色。

如何使用上面的代码来做到这一点？

Answer 1

向要创建的子单元格添加CSS类（或style属性：

domConstruct.create("div", {
    className: 'subCellClass',
    innerHTML : value[i]
}, node);