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

【问题标题】：How to highlight unique cell in UI Grid using cellClass function?如何使用 cellClass 函数突出显示 UI Grid 中的唯一单元格？
【发布时间】：2017-01-27 22:56:43
【问题描述】：

我的要求是我想通过其行号和列号突出显示特定的单元格。但是，当我滚动网格时，其他单元格也被突出显示。看起来我还没有理解 UI 网格 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

【问题讨论】：

标签： javascript angularjs angularjs-directive angular-ui-grid

【解决方案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

【讨论】：

由于某种原因，我不能按价值行事，因为。这只是一个示例。在我的工作代码中，我同样有数字。许多数字在重复。
你能提供一些这些数字的例子吗？
例如在同一个例子中。如果网格中的“Vality”和“Suretech”重复（我的意思是重复）也会突出显示。但我想突出显示特定的实例引用（rowNo 和 Col 编号不是单元格的值）。我在想 rowRenderIndex 和 colRenderIndex 会给我修复单元格引用，但看起来它给了我相对引用（可能特定于视口）

【解决方案2】：

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

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

currentTopRow 下的属性救了我。

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

每次 rowRenderIndex 在滚动时被重置。添加这个变量帮助我找到了固定位置编号，因此只有我可以实现特定单元格的行和列详细信息突出显示。

【讨论】：

【解决方案3】：

我知道这篇文章已有一年多的历史了，但它具有误导性。建议的答案是将!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

【讨论】：