Hintergrundfarbe einer bestimmten Zeile in slickgrid ändern?

Question

gibt es eine Möglichkeit, die Hintergrundfarbe einer bestimmten Zeile in der Slickgrid-Tabelle zu ändern, während andere so gelassen werden, wie es ist ??? Ich verwende

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

wo „editierbare-col“, „buy-Reihe“ & „buy-col“ sind die CSS-Klassen die Farbe Eigenschaften für Hintergrund enthält/Vordergrund usw. wenn ich das ändern wollen Hintergrundfarbe einer bestimmten Reihe, ich muss zur Farbe des ganzen Gitters ändern (durch das Durchlaufen der Gitterlänge), oder wenn ich Klasse für eine bestimmte Reihe zB

rowIndex[5] = { 
    price : "editable-col", 
    qty : "editable-col", 
    ccy : "buy-row", 
    side : "buy-col", 
    symbol : "buy-row", 
    enable : "buy-row" 
}; 
grid.setCellCssStyles("", rowIndex); 

es setzt die CSS-Klasse für die Reihe erwünscht, aber alle CSS-Eigenschaften für andere Zeilen löschen, dies zu vermeiden, muss ich die CSS-Klassen für die anderen Reihen zurückgesetzt zu, die i in Bezug auf die Leistung nicht gut denken und Zeit, wenn Sie Tausende von Zeilen haben. will nur wissen, gibt es einen besseren Weg, dies zu tun, ohne die anderen Zeilen zu berühren. ?? Jede Hilfe wird sehr geschätzt.

Answer 1

Angenommen, Sie verwenden Slick.Data.DataView, können Sie die getItemMetadata method dynamisch ändern können, hinzufügen Klassen zum enthaltenen Zeilenelement. Sie können dann einfach Ihr Raster so einrichten, dass es den Stil der Zeile basierend auf einem Wert innerhalb der Zeile ändert. Angenommen, Ihre Slick.Data.DataView Instanz dataView aufgerufen:

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

Dies ermöglicht Ihnen, dynamisch die „buy-Reihe“ Klasse, um die Zeile hinzuzufügen. Sie können die Funktion so ändern, dass mehrere Bedingungen für verschiedene Klassen gelten. Beachten Sie jedoch, dass die CSS-Klassen für jede Zeile abhängig von den Eigenschaften des Zeilenobjekts bedingt sind. Die ret.cssClasses ist der Schlüssel hier. Es ist die Zeichenfolge, die in der Zeile HTML ausgegeben wird: <div class="[ret.cssClasses]">.

Sie können nun so etwas wie dies tun, um eine Reihe von Klassen zu ändern:

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

Ja, das ist eine Möglichkeit, einfach jQuery zu verwenden:

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

aktualisieren

persistent zu haben, markieren Sie die getItemMetadata Funktion implementieren müssen. Es kann wie folgt geschehen:

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