有什么办法可以改变slickgrid表中特定行的背景颜色，而又不保留其他颜色？我正在使用
for ( var i = 0; i < grid.length; i++) {
rowIndex[i] = {
price : "editable-col",
qty : "editable-col",
ccy : "buy-row",
side : "buy-col",
symbol : "buy-row",
enable : "buy-row"
};
}
grid.setCellCssStyles("", rowIndex);
其中“ editable-col”，“ buy-row”和“ buy-col”是CSS类，其中包含background / foreground等的颜色设置属性。每当我想更改特定行的背景颜色时，都必须更改为整个网格着色（通过遍历网格长度），或者如果我为特定行设置类，例如
rowIndex[5] = {
price : "editable-col",
qty : "editable-col",
ccy : "buy-row",
side : "buy-col",
symbol : "buy-row",
enable : "buy-row"
};
grid.setCellCssStyles("", rowIndex);
它为所需的行设置了css类，但清除了其他行的所有css属性，为避免这种情况，我也需要为其他行重置css类，这在性能和时间方面都是不佳的，当您拥有数千个行。只是想知道有没有更好的方法可以做到这一点而无需碰触其他行。?? 任何帮助将不胜感激。
假设您正在使用Slick.Data.DataView，则可以修改该getItemMetadata方法以将类动态添加到包含的行元素中。然后，您可以简单地设置网格以根据行内的某些值更改行的样式。假设您的Slick.Data.DataView实例称为dataView：
dataView.getItemMetadata = metadata(dataView.getItemMetadata);
function metadata(old_metadata) {
return function(row) {
var item = this.getItem(row);
var meta = old_metadata(row) || {};
if (item) {
// Make sure the "cssClasses" property exists
meta.cssClasses = meta.cssClasses || '';
if (item.canBuy) { // If the row object has a truthy "canBuy" property
meta.cssClasses += ' buy-row'; // add a class of "buy-row" to the row element.
} // Note the leading ^ space.
if (item.qty < 1) { // If the quantity (qty) for this item less than 1
meta.cssClasses += ' out-of-stock'; // add a class of "out-of-stock" to the row element.
}
/* Here is just a random example that will add an HTML class to the row element
that is the value of your row's "rowClass" property. Be careful with this as
you may run into issues if the "rowClass" property isn't a string or isn't a
valid class name. */
if (item.rowClass) {
var myClass = ' '+item.rowClass;
meta.cssClasses += myClass;
}
}
return meta;
}
}
这将允许您动态地将“ buy-row”类添加到该行。您可以将函数更改为对不同的类具有多个条件，只需记住每行的CSS类将根据行对象属性而定。这ret.cssClasses是关键。这是将在HTML：行中输出的字符串<div class="[ret.cssClasses]">。
您现在可以执行以下操作来更改行的类：
var row = dataView.getItem(5);
row.canBuy = true;
dataView.updateItem(row.id, row);
// The row element should now have a class of "buy-row" on it.
row.canBuy = false;
row.qty = 0;
dataView.updateItem(row.id, row);
// It should now have a class of "out-of-stock" and the "buy-row" class should be gone.
row.qty = 10;
row.rowClass = 'blue';
dataView.updateItem(row.id, row);
// It should now have a class of "blue" and the "out-of-stock" class should be gone.
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句