css - 将 CSS 样式分配给 SlickGrid 行

标签 css slickgrid

我有一个向用户显示有限数量数据的 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 ,如何实现这一点?

最佳答案

getItemMetadata(index) 函数不仅在 Dataview 中可用,它还是传递给 grid constructordata 接口(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>

关于css - 将 CSS 样式分配给 SlickGrid 行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28729355/

相关文章:

Android软键盘调整背景图片大小(网站)

jquery - 动态生成 HTML 后显示器发出铃声

slickgrid - 有没有办法使用 SlickGrid 强制刷新单行?

html - 为什么 body 溢出不起作用?

javascript - 我需要学习什么语言才能为我的爱普生收据打印机制作脚本? (包括手动链接)

css - 哪些 CSS 框架与 React 完美配合?

在 SlickGrid 中选择带有复选框的行

css - 更改 Twitter Bootstrap 表颜色的单列?

javascript - 在 SlickGrid 中设置默认排序列

jquery - Slickgrid 列宽应根据最宽的行内容自动调整大小