如何将 css 类添加到 slickGrid 中的特定行？

Posted 2023-02-22

【中文标题】如何将 css 类添加到 slickGrid 中的特定行？

【英文标题】：How do I add a css class to particular rows in slickGrid?

【发布时间】：2012-02-14 08:31:00

【问题描述】：

我到处搜索以了解如何将类添加到 slickgrid 中的特定行。看起来曾经有一个 rowCssClasses 属性，但现在已经消失了。对此的任何帮助将不胜感激。

更新：我使用 getItemMetadata 解决了这个问题...所以在渲染之前，您必须执行以下操作：

dataView.getItemMetadata = function (row) 
    if (this.getItem(row).compareThis > 1) 
        return 
            'cssClasses': 'row-class'
        ;
    
;

这会将“行类”注入到与 if 语句匹配的行中。似乎这个 getItemMetadata 函数不存在，直到你把它放在那里并且 slickGrid 检查那里是否有任何东西。这使得弄清楚它的选项有点困难，但是如果您在 slick.grid.js 文件中搜索 getItemMetadata ，您应该会找到一些隐藏的宝藏！我希望这对某人有帮助！

如果有更好的方法，请告诉我。

【参考方案1】：

在较新版本的 SlickGrid 中，DataView 提供了自己的 getItemMetadata 来为组标题和总计提供格式设置。不过，很容易将其与您自己的实现链接起来。例如，

function row_metadata(old_metadata_provider) 
  return function(row) 
    var item = this.getItem(row),
        ret = old_metadata_provider(row);

    if (item && item._dirty) 
      ret = ret || ;
      ret.cssClasses = (ret.cssClasses || '') + ' dirty';
    

    return ret;
  ;


dataView.getItemMetadata = row_metadata(dataView.getItemMetadata);

【讨论】：

row 参数的值是多少？我调试并看到row总是=0，所以item总是数据源中的第一项。

【参考方案2】：

您可以使用 setCellCssStyles 函数： https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles

grid.setCellCssStyles(key, hash)

key - 一个字符串键。将覆盖已关联的任何数据 这把钥匙。

hash - 附加单元格 CSS 类的哈希，由行号和 然后按列 ID。可以指定和分隔多个 CSS 类 按空间。

例子：

0： "number_column": "单元格粗体", "title_column": "单元格标题单元格突出显示" , 4： "percent_column": "单元格突出显示"

我用它来突出显示网格中已编辑的字段。我不喜欢 getItemMetadata 方法。

【讨论】：

这个答案似乎要简单得多，而且还具有让我专注于单元格而不是行的优点。我用它来更改行中每个单元格的背景，以使整行看起来都被突出显示。这很有帮助，因为我想覆盖之前应用的单元格特定背景颜色，所以我需要单独选择单元格，而不是行对象。

【参考方案3】：

        myDataView.getItemMetadata = function(index)
        
            var item = myDataView.getItem(index);
            if(item.isParent === true) 
                return  cssClasses: 'parentRow' ;
            
            else 
                return  cssClasses: 'childRow' ;
            
        ;

//在我的 CSS 中

       .parentRow 
           background-color:  #eeeeee;
        
        .childRow 
           background-color:  #ffffff;