更改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 });