如何使用cellClass函数在UI Grid中突出显示唯一单元格？

Question

我的要求是，我想通过行号和列号突出显示特定的单元格。 但是当我滚动网格时，在陷入沉思的同时，其他单元格也被突出显示。 看起来我还不了解UI网格cellClass方法。 谁能启发我？ 如果我的理解不正确，那么我将如何实现此功能，其中仅突出显示特定的单元格（请参考行号和列号）。

下面是我的代码和插件的核心部分。

var uniqueCellInfoArr = [{"row":2,"col":1},{"row":4,"col":1} ]
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) 
        {
          for (var i = 0; i < uniqueCellInfoArr.length; i++)
          {
            if ( uniqueCellInfoArr[i].row == rowRenderIndex &&  uniqueCellInfoArr[i].col == colRenderIndex)
            {
              return "red"
            }
          }

http://plnkr.co/edit/5xQoKiKIL8vY8EeLsJG5?p=preview

Answer 1

rowRenderIndex，colRenderIndex是表中呈现的单元格的索引。 向下滚动时，单元格将再次呈现，因此索引将保留。

更好的解决方案是根据其值突出显示单元格，您可以像这样

var uniqueCellInfoArr = ['Velity','Suretech'];

cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) 
    {
      var cellValue = grid.getCellValue(row, col);
      if(uniqueCellInfoArr.indexOf(cellValue) > -1) return 'red';
    }

可以使用的插件： http ://plnkr.co/edit/g2QoWcWdP5FYKOwMOUm8?p=preview

Answer 2

最后我可以解决这个问题。 我用解决方案修改了插件。

http://plnkr.co/edit/UQu94rC5jxzYDZQQa5P4?p=preview

在属性currentTopRow下面救了我。

rowRenderIndex = rowRenderIndex+grid.renderContainers.body.currentTopRow;

每次滚动滚动rowRenderIndex时都会对其进行重置。 添加此变量有助于我确定位置号，因此只有我才能实现用行和列详细信息突出显示特定单元格。

Answer 3

我知道这篇文章已有一年多的历史了，但它具有误导性。 建议的答案是只对字段类打一巴掌!important这实际上是没有必要的。 重要规则只应在绝对需要时使用。 解决方法是仅使用以下方法提高CSS的特异性，以覆盖所有默认设置：

.grid .ui-grid-row .red { color: red;  background-color: yellow; }
.grid .ui-grid-row .blue { color: blue;  }

请参阅： ui-grid中的动态单元样式