Question

我有一个向用户显示有限数量数据的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();

只是犯了错误。

如何在不使用数据视图时实现这一目标？

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>

将CSS样式分配给SlickGrid行

1 个答案: