Question

我的要求是我想通过行号和列号突出显示特定单元格。但是当我滚动网格时，其他单元格也会突出显示。看起来我还没有理解UI grid cellClass方法。任何人都可以开导我吗？如果我的理解不正确，我将如何实现此功能，只会突出显示特定单元格（参考行号和列号。）

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

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

我意识到这篇文章已有一年多的历史了，但这是误导性的。建议的答案是将!important打到字段类上，这实际上没有必要。只有在绝对需要时才应使用重要规则。解决方法是使用以下内容提高CSS特异性以覆盖任何默认值：

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

请参阅：Dynamic Cells Styling in ui-grid

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

2 个答案: