[英]SlickGrid: How to loop through each row and set color based on the condition?
I'm beginner to SlickGrid. 我是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). 我想知道如何循环网格中的每一行并根据条件设置行背面颜色(例如:如果年龄介于20 - 40之间,行将具有蓝色,否则,它将具有红色)。
Assuming you're using Slick.Data.DataView
, you can modify the getItemMetadata
method to dynamically add classes to the containing row element. 假设您正在使用Slick.Data.DataView
,您可以修改getItemMetadata
方法以动态地将类添加到包含的行元素。 I am going to write this as if your Slick.Data.DataView
instance is called dataView
, here you go: 我打算写这个,好像你的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;
}
}
This will add a class of 'blue'
or 'red'
to the row's element. 这将在行的元素中添加一类'blue'
或'red'
。
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 像这样将格式化程序添加到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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.