更改slickgrid中特定行的背景颜色？

Question

有没有什么办法可以改变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); 

，其中“编辑-COL”，“买行” &“买入-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); 

它设置为所需的行CSS类，但清除所有的CSS属性的其他行，以避免这种情况，我需要的CSS类重置其他行也这是我觉得不好在性能方面和你有成千上万行的时间。只是想知道有没有更好的方法来做到这一点，而不需要触及其他行。 ??任何帮助将不胜感激。

Answer 1

假设你正在使用Slick.Data.DataView，您可以修改getItemMetadata method动态地添加包含行元素的类。然后，您可以简单地设置网格，根据行内的某个值更改行的样式。假设你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; 
    } 
} 

这将让你“买行”级动态地添加到该行。您可以将函数更改为对不同类有多个条件，只要记住每行的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. 

Answer 2

是，一个方法就是使用jQuery：

var rowNumber = 3; 
$($('.grid-canvas').children()[rowNumber]).css('background-color','red'); 

更新

为了有持续性凸显你需要实现getItemMetadata功能。它可以这样做：

HTML

<div style="width:600px;"> 
    <div id="myGrid" style="width:100%;height:500px;"></div> 
</div> 

CSS

.highlight{ 
    background-color: #ff0000 !important; 
} 

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