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

【问题标题】：SlickGrid change Row background color on rolloverSlickGrid 在翻转时更改行背景颜色
【发布时间】：2011-08-04 22:24:26
【问题描述】：

我正在使用 2.0a 版的 SlickGrid 来实现分组功能。一切都很好（有很多定制）。我正在尝试在翻转事件中更改整行的background-color。

我试过了：

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

还有这个：

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

这适用于单个单元格：

.lr:hover { background: #dee0fe; }

但在整行上似乎没有任何效果，而且我从未见过这样的例子。我还将单元格设置为selectable:true, focusable:false。
看起来应该很容易...

谢谢

【问题讨论】：

标签： jquery css slickgrid

【解决方案1】：

这对我来说很好用：

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

【讨论】：

虽然我投了赞成票，但这并不是那么简单。您还需要： .slick-row { 背景：白色； } 之类的。如果您尝试使用最小样式的配置，您将需要两个 css 规则。

【解决方案2】：

只是猜测，基于您问题中的 CSS：

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

【讨论】：

【解决方案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");
});

【讨论】：

【解决方案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;
}

【讨论】：