SlickGrid：如何遍历每一行并根据条件设置颜色？答案

【问题标题】：SlickGrid: How to loop through each row and set color based on the condition?SlickGrid：如何遍历每一行并根据条件设置颜色？
【发布时间】：2013-10-30 01:58:42
【问题描述】：

我是 SlickGrid 的初学者。我想知道如何遍历网格中的每一行并根据条件设置行背景颜色（例如：如果年龄在 20 - 40 之间，则该行将具有蓝色，否则，它将具有红色）。

【问题讨论】：

标签： javascript slickgrid

【解决方案1】：

您需要使用格式化程序，以便您的列定义看起来像这样

{id: "delete", name: "Del", field: "del", formatter: Slick.Formatters.Delete, width: 15},

像这样将格式化程序添加到 slickgrid

(function ($) {
// register namespace
$.extend(true, window, {
    "Slick": {
        "Formatters": {                
            "Delete": DeleteLink
        }
    }
});


function DeleteLink(row, cell, value, columnDef, dataContext) {
    //Logic to present whatever you want based on the cell data
    return "<a href=\"javascript:removeId('contact', '" + dataContext.folderId + "', '" + dataContext.id + "')\"><img width=\"16\" height=\"16\" border=\"0\" src=\"/images/delete.png\"/></a>";
}

})(jQuery);

【讨论】：

【解决方案2】：

假设您正在使用Slick.Data.DataView，您可以修改getItemMetadata method 以将类动态添加到包含的行元素。我要这样写，就好像你的Slick.Data.DataView 实例被称为dataView，给你：

dataView.getItemMetadata = metadata(dataView.getItemMetadata);

function metadata(old_metadata_provider) {
  return function(row) {
    var item = this.getItem(row);
    var ret  = (old_metadata_provider(row) || {});

    if (item) {
      ret.cssClasses = (ret.cssClasses || '');
      if (item.age >= 20 && item.age <= 40) {
        ret.cssClasses += ' blue';
      } else {
        ret.cssClasses += ' red';
      }
    }

    return ret;
  }
}

这会将'blue' 或'red' 的类添加到行的元素中。

【讨论】：

嗨，是否可以将类添加到行中的特定单元格而不是整行？谢谢！
这是在迭代行吗？我在代码中没有看到..