javascript - SlickGrid:各行をループして、条件に基づいて色を設定する方法は?

Question

私はSlickGridの初心者です。グリッド内の各行をループして、条件に基づいて行の背景色を設定する方法を知りたいです (例: 年齢が 20 から 40 の場合、行は青色になり、それ以外の場合は赤色になります) ）。

Answer 1

を使用していると仮定すると、メソッドSlick.Data.DataViewを変更して、含まれている行要素にクラスを動的に追加できます。インスタンスが呼び出されたかのようにこれを書きます。getItemMetadataSlick.Data.DataViewdataView

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