Question

我正在使用SlickGrid的2.0a版本来进行分组功能。一切都很好（有很多自定义）。我正试图在翻转事件中更改ENTIRE ROW的background-color。

我试过这个：

.slick-row { background-color:#dee0fe; }

和此：

.slick-row.ui-state-active { background:#dee0fe; }

这适用于单个细胞：

.lr:hover { background: #dee0fe; }

但是整个行似乎没有任何作用，我从未见过这样的例子。我也将单元格设置为selectable:true, focusable:false 好像它应该很容易......

由于

Answer 1

这对我来说很好用：

.slick-row:hover { background-color: red; }

Answer 2

根据你问题中的CSS，猜测一下：

 .slick-row:hover .lr {
     background-color:#dee0fe;
 }

Answer 3

我自己就是这样做的，这是我想出的简化版本。你可以对它进行整理并假设你的列没有改变，有意义的是缓存哈希的内部部分。

使用API调用它应该如下所示：

grid.onMouseEnter.subscribe(function (e) {
    var hash = {};
    var cols = grid.getColumns();

    for (var i = 0; i < cols.length; ++i) {
        hash[grid.getCellFromEvent(e).row][cols[i].id] = "hover";
    }

    grid.setCellCssStyles("hover", hash);
});

grid.onMouseLeave.subscribe(function (e) {
    grid.removeCellCssStyles("hover");
});

Answer 4

您需要做的就是获取行中的单元格集合，并在每个单元格的鼠标输入/离开时设置样式：

$('.slick-cell').mouseenter(function () {
     $(this.parentNode.children).addClass('slick-cell-hovered') ;
});

$('.slick-cell').mouseleave(function () {
     $(this.parentNode.children).removeClass('slick-cell-hovered');
});


.slick-cell-hovered 
{
     background: #EBEFF2 none;
}

SlickGrid在翻转时更改行背景颜色

4 个答案: