将 CSS 样式分配给 SlickGrid 行答案

【问题标题】：Assigning CSS Style to SlickGrid Row将 CSS 样式分配给 SlickGrid 行
【发布时间】：2015-04-28 01:21:58
【问题描述】：

我有一个 slickgrid，可以向用户显示有限数量的数据。如果隐藏列中有数据，我希望该行加粗。我没有使用数据视图，因此 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();

这只是抛出了错误。

不使用数据视图时如何做到这一点？

【问题讨论】：

标签： css slickgrid

【解决方案1】：

getItemMetadata(index) 函数不仅在 Dataview 中可用，它是传递给 grid constructor 的 data 接口的一部分。需要考虑的是，如果您要使用 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>

【讨论】：