SlickGrid在翻轉時更改行背景顏色

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;
}