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

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

本文关键字：显示 唯一 单元格 网格 cellClass 何使用 函数 UI      更新时间：2023-09-26

我的要求是，我应该是突出显示其行号和列号的特定单元格。但在给定的跌落，当我滚动网格其他细胞也得到突出显示。看起来我还没有理解uigridcellclass方法。有人能开导我吗?如果我的理解是不正确的，我将如何实现这个功能，只有特定的单元格将被突出显示(参考行号和列号)

下面是我的核心部分代码和活塞。 
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 =预览

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

我终于解决了这个问题。我用我的溶液修改了活塞。

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

预览

下面的属性currentTopRow保存了我

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

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

我知道这篇文章已经写了一年多了，但这是误导。建议的答案是把!important放在实地班上，这真的没有必要。重要的规则应该只在绝对需要的时候使用。一种解决方法是通过以下方式提高CSS专用性来覆盖任何默认值:

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

参见:ui-grid中的动态单元格样式

相关文章：