javascript 更改 slickgrid 中特定行的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19887575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing background color of a specific row in slickgrid?
提问by Omar Bahir
is there any way to change the background color of a specific row in slickgrid table while leaving other as it is ??? i'm using
有什么方法可以更改 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);
where "editable-col" , "buy-row" & "buy-col" are the CSS classes containing the color setting properties for background/foreground etc. whenever i want to change the background color of a specific row , i have to change to color of whole grid(by looping through grid length) , or if i set class for a specific row e.g.
其中“editable-col”、“buy-row”和“buy-col”是包含背景/前景等颜色设置属性的CSS类。每当我想更改特定行的背景颜色时，我都必须更改为整个网格着色（通过循环网格长度），或者如果我为特定行设置类，例如
rowIndex[5] = {
price : "editable-col",
qty : "editable-col",
ccy : "buy-row",
side : "buy-col",
symbol : "buy-row",
enable : "buy-row"
};
grid.setCellCssStyles("", rowIndex);
it sets the css class for the desired row but clear all css properties for other rows , to avoid this i need to reset the css classes for the other rows too which is i think not good in terms of performance and time when you have thousands of rows. just want to know is there any better way to do this without touching the other rows. ?? any help will be highly appreciated.
它为所需的行设置 css 类，但清除其他行的所有 css 属性，为避免这种情况，我也需要重置其他行的 css 类，我认为这在性能和时间方面不好，当你有数千个行。只是想知道有没有更好的方法可以在不触及其他行的情况下做到这一点。?? 任何帮助将不胜感激。
回答by idbehold
Assuming you're using Slick.Data.DataView, you can modify the getItemMetadatamethodto dynamically add classes to the containing row element. You can then simply setup your grid to change the row's style based on some value inside the row. Assuming your Slick.Data.DataViewinstance is called dataView:
假设您正在使用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;
}
}
This will allow you to dynamically add the "buy-row" class to the row. You can change the function to have multiple conditions for different classes, just remember that the CSS classes for every row will be conditional based on the row object properties. The ret.cssClassesis the key here. It is the string that'll get output in the row HTML: <div class="[ret.cssClasses]">.
这将允许您将“buy-row”类动态添加到行中。您可以将函数更改为具有针对不同类的多个条件，请记住，每一行的 CSS 类将根据行对象属性进行设置。这ret.cssClasses是这里的关键。它是将在行 HTML: 中获得输出的字符串<div class="[ret.cssClasses]">。
You can now do something like this to change a row's classes:
您现在可以执行以下操作来更改行的类：
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.
回答by llundin
Yes, one way is to simply use jQuery:
是的，一种方法是简单地使用 jQuery：
var rowNumber = 3;
$($('.grid-canvas').children()[rowNumber]).css('background-color','red');
Update
更新
To have persistent highlighting you need to implement the getItemMetadata function. It can be done like this:
要持续突出显示，您需要实现 getItemMetadata 函数。可以这样做：
html
html
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
css
css
.highlight{
background-color: #ff0000 !important;
}
javascript
javascript
var grid;
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
data.getItemMetadata = function (row) {
if (this[row].title == 'Task 5'){
return {
cssClasses: 'highlight'
};
}
return null;
}
grid = new Slick.Grid("#myGrid", data, columns, { enableColumnReorder: false });
