javascript - SlickGrid: How to loop through each row and set color based on the condition? - Stack Overflow

admin管理员组

文章数量:1355748

I'm beginner to SlickGrid. I would like to know on how to loop through each row in a grid and set row back-color based on the condition (for ex: if Age between 20 - 40, the row will have blue color, otherwise, it will have red color).

I'm beginner to SlickGrid. I would like to know on how to loop through each row in a grid and set row back-color based on the condition (for ex: if Age between 20 - 40, the row will have blue color, otherwise, it will have red color).

• javascript
• slickgrid

Share Improve this question Follow edited Mar 5, 2015 at 17:55 John 16899 bronze badges asked Oct 21, 2013 at 14:10 J - C SharperJ - C Sharper 1,70777 gold badges2525 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Assuming you're using Slick.Data.DataView, you can modify the getItemMetadata method to dynamically add classes to the containing row element. I am going to write this as if your Slick.Data.DataView instance is called dataView, here you go:

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

This will add a class of 'blue' or 'red' to the row's element.

You'll want to use a formatter so your column definition would look something like this

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

Add your formatters to slickgrid like this

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

本文标签： javascriptSlickGrid How to loop through each row and set color based on the conditionStack Overflow