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

Question

我的要求是我想通过行号和列号突出显示特定的单元格。但是当我滚动网格时给定的 plunked 其他单元格也被突出显示。看来我还没有理解 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 是在table中渲染的单元格的索引。当您向下滚动时，单元格会再次呈现，因此索引会恢复。

一个更好的解决方案是根据它的值突出显示单元格，你可以这样做

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

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

正在工作的 plunker：http://plnkr.co/edit/g2QoWcWdP5FYKOwMOUm8?p=preview

Answer 2

我终于可以解决这个问题了。我用我的解决方案修改了 plunker。

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

下面属性 currentTopRow 救了我。

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

每次 rowRenderIndex 在滚动时被重置。添加此变量帮助我得出固定位置编号，因此只有我才能实现使用行和列详细信息突出显示的特定单元格。

Answer 3

我意识到这个 post 已经有一年多了，但它具有误导性。建议的答案是将 !important 打到字段 class 上，这确实没有必要。 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 网格中的唯一单元格？

How to highlight unique cell in UI Grid using cellClass function?

javascript

angularjs

angularjs-directive

angular-ui-grid