SlickGrid：如何遍歷每一行並根據條件設置顏色？

Question

我是SlickGrid的初學者。 我想知道如何循環網格中的每一行並根據條件設置行背面顏色（例如：如果年齡介於20 - 40之間，行將具有藍色，否則，它將具有紅色）。

Answer 1

假設您正在使用Slick.Data.DataView ，您可以修改getItemMetadata方法以動態地將類添加到包含的行元素。 我打算寫這個，好像你的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' 。

Answer 2

您將需要使用格式化程序，因此您的列定義看起來像這樣

{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);