css - 将 CSS 样式分配给 SlickGrid 行

Question

我有一个向用户显示有限数量数据的 slickgrid。如果隐藏列中有数据，我希望该行加粗。我没有使用数据 View ，因此 getItemMetadata 函数不可用。我已经从另一个 SO 帖子中尝试过这个:

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

这只是抛出错误。

如果不使用数据 View ，如何实现这一点？

Answer 1

getItemMetadata(index) 函数不仅在 Dataview 中可用，它还是传递给 grid constructor 的 data 接口(interface)的一部分.考虑因素是，如果您要使用数据 View ，则需要容纳它。

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