Блог

Главная - Вопросы по программированию - SlickGrid изменяет цвет фона строки при переносе

SlickGrid изменяет цвет фона строки при переносе

#jquery #css #slickgrid

#jquery #css #slickgrid

Вопрос:

Я использую SlickGrid версии 2.0a для возможности группирования. Все отлично работает (с множеством настроек). Я пытаюсь изменить background-color для ВСЕЙ СТРОКИ при событии опрокидывания.

Я пробовал это:

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

и это:

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

Это работает с отдельными ячейками:

 .lr:hover { background: #dee0fe; }

но, похоже, ничего не работает со всей строкой, и я никогда не видел примера этого.
У меня также есть ячейки, установленные на selectable:true, focusable:false .
Кажется, что это должно быть легко…

Спасибо

Ответ №1:

Для меня это работает просто отлично:

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

Комментарии:

1. На самом деле это не так просто, хотя я проголосовал за. У вас также должен быть: .slick-row { backgroud: white; } или что-то в этом роде. Если вы пытаетесь заставить работать конфигурацию в минималистичном стиле, вам понадобятся оба правила 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;
}