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

【问题标题】：How do I add a css class to particular rows in slickGrid?如何将 css 类添加到 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 ，您应该会找到一些隐藏的宝藏！我希望这对某人有帮助！

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

【问题讨论】：

标签： slickgrid

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

【讨论】：