Zmiana koloru tła określonego wiersza w slickgrid?

Question

Czy istnieje sposób na zmianę koloru tła określonego wiersza w tabeli zeszytowej, pozostawiając inne, jak to jest? Używam

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

gdzie „edytowalne-col”, „kup-wiersz” & „kup-col” są klasy CSS zawierające właściwości koloru tła/planie itp ustawienie Ilekroć chcesz zmienić kolor tła określonego wiersza, muszę zmienić na kolor całej siatki (przez zapętlenie przez długość siatki) lub jeśli ustawię klasę dla określonego wiersza, np.

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

ustawia klasę CSS dla żądanego wiersza ale usunąć wszystkie właściwości CSS dla innych wierszy, aby tego uniknąć muszę zresetować klas css dla innych rzędów też, co jest nie sądzę dobry pod względem wydajności i czas, kiedy masz tysiące wierszy. tylko chcesz wiedzieć, czy istnieje lepszy sposób, aby to zrobić bez dotykania innych wierszy. ?? Jakakolwiek pomoc będzie doceniona.

Answer 1

Zakładając, że używasz Slick.Data.DataView można modyfikować getItemMetadata method dynamicznie dodawać klasy do elementu zawierającego wiersz. Następnie możesz po prostu ustawić siatkę, aby zmienić styl wiersza na podstawie pewnej wartości wewnątrz wiersza. Zakładając, że wystąpienie Slick.Data.DataView nazywa 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; 
    } 
} 

To pozwoli dynamicznie dodać klasę „kupuj-wiersz” do wiersza. Możesz zmienić funkcję na wiele warunków dla różnych klas, pamiętaj tylko, że klasy CSS dla każdego wiersza będą zależne od właściwości obiektu wiersza. Kluczem jest tutaj ret.cssClasses. Jest to ciąg, który otrzyma wynik w wierszu HTML: <div class="[ret.cssClasses]">.

Teraz można zrobić coś podobnego do zmiany zajęcia rzędzie za:

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

Tak, jednym ze sposobów jest po prostu użyć jQuery:

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

Aktualizacja

mieć trwałe podkreślając trzeba zaimplementować funkcję getItemMetadata. Można to zrobić tak:

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