Изменение цвета фона определенной строки в 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», «купить-строку» & «купить-седловины» являются классы 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'); 

Update

Чтобы иметь постоянные выделения необходимо реализовать функцию 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 });