Назначение стиля CSS для строки SlickGrid

Question

У меня есть slickgrid, который отображает пользователю ограниченное количество данных. Если в скрытом столбце есть данные, я хочу, чтобы строка была выделена жирным шрифтом. Я не использую dataview, поэтому функция getItemMetadata недоступна. Я пробовал это из другого сообщения СО:

var selectedRow = gridB.getSelectedRows(); 
item["Filter"] = filter; 
var obj = {}; 
obj[selectedRow]={Name:"highlight"}; 
gridB.setCellCssStyles("highlight",obj); 
gridB.updateRow(item); 
gridB.invalidateRow(selectedRow); 
gridB.render(); 

Но он ничего не делает. Затем я попробовал это из еще одного сообщения:

var selectedRow = gridB.getSelectedRows(); 
var item = gridB.getDataItem(selectedRow); 
item["Filter"] = filter; 
var modifiedCells = {}; 
modifiedCells[selectedRow][1] = "highlight"; 
gridB.setCellCssStyles("highlighted", modifiedCells); 
gridB.updateRow(item); 
gridB.invalidateRow(selectedRow); 
gridB.render(); 

который просто бросил ошибки.

Как это можно сделать, если вы не используете dataview?

Answer 1

Функция getItemMetadata(index) доступна не только из Dataview, она является частью интерфейса data, переданной в grid constructor. Учет состоит в том, что если вы должны использовать Dataview, вам нужно будет его разместить.

<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css"> 
 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script> 
 
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script> 
 
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script> 
 
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script> 
 
<style> 
 
.alternate_row { 
 
background: #A8A8A8; 
 
} 
 
</style> 
 
<div id="myGrid" style="width:600px;height:500px;"></div> 
 
<script> 
 
var grid; 
 
var data = []; 
 
var columns = [{ 
 
    id: "server", 
 
    name: "Server", 
 
    field: "server", 
 
    width: 180 
 
}]; 
 
for (var i = 0; i < 2; i++) { 
 
    columns.push({ 
 
     id: "id" + i, 
 
     name: "Id" + i, 
 
     field: i 
 
    }); 
 
} 
 
var options = { 
 
    editable: false, 
 
    enableCellNavigation: true 
 
}; 
 
$(function() { 
 
    for (var i = 0; i < 5; i++) { 
 
     var d = (data[i] = {}); 
 

 
     if (0 == i % 2) { 
 
      d.hiddenColumn = '1' 
 
     } 
 

 
     d.server = "Server " + i; 
 
     for (var j = 0; j < columns.length; j++) { 
 
      d[j] = Math.round(Math.random() * 100); 
 
     } 
 
    } 
 

 
    data.getItemMetadata = function (row) { 
 
      
 
     return data[row].hiddenColumn ? { 
 
      cssClasses: 'alternate_row' 
 
     } : {} 
 
    } 
 
    
 
    grid = new Slick.Grid("#myGrid", data, columns, options); 
 
    
 
}); 
 
</script>