angular-ui-grid: как выделить строку при наведении мыши?

Я хочу выделить целую строку угловой ui-сетки, когда мышь находится поверх нее.

Я попытался изменить rowTemplate, добавив обратные вызовы ng-mouseover и ng-mouseleave, которые устанавливают цвет фона.

вот мой rowTemplate-я ожидаю, что первые три строки изменят весь цвет строки на красный. Но меняется только ячейка под мышкой.

<div
    ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);"
    ng-mouseleave="rowStyle={}"
    ng-style="rowStyle"
    ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
    ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell"
    ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
    role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
    ui-grid-cell>
</div>

как выделить целую строку в событиях mouseover?

другой подход, который я пробовал: используя некоторую функцию обратного вызова, сделайте это-как appScope.onRowHover в Примере. Здесь, у меня есть область действия ряда, зависшего на. Как мне создать стиль этой строки в функции onRowHover?

спасибо!

ссылка на Plunkr. Я ожидаю, что mousing над ячейкой сетки превратит всю строку в красный цвет.

8
angular-ui-grid angularjs

4 ответов

вот, да. Я внес изменения в шаблон строки. http://plnkr.co/edit/gKqt8JEo2FukS3URRLJ5?p=preview

RowTemplate:

<div ng-mouseover="rowStyle={'background-color': 'red'}; grid.appScope.onRowHover(this);" ng-mouseleave="rowStyle={}">
    <div  ng-style="rowStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
    class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell>
    </div>
</div>
9

(angular-ui-grid#3.0.7) Самый простой способ-использовать стили наведения CSS, просто добавьте следующие стили CSS для страницы, и все готово:

.ui-grid-row:hover .ui-grid-cell {
  background-color: beige;
}

С ui-grid 3.1.1 вышеуказанные стили не работали. Я должен был сделать это:

.ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red}
.ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red}

решение заимствовано отсюда

31

существует небольшая проблема с решением SaiGiridhar: выделение выделения перестает работать, так как другая обертка добавляется поверх ng-repeat div.

небольшое исправление для него было бы:

<div ng-mouseover="rowStyle={'background-color': (rowRenderIndex%2 == 1) ? '#76BED6' : '#BFDAE3'};" ng-mouseleave="rowStyle={}" ng-style="selectedStyle={'background-color': (row.isSelected) ? '#379DBF' : ''}">
    <div ng-style="(!row.isSelected) ? rowStyle : selectedStyle" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
        class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}" ui-grid-cell>
    </div>
</div>

Я только что скопировал свой код. Он добавляет альтернативный стиль строки для выделенных строк, а также исправляет выделение выбранной строки.

надеюсь, это кому-то поможет.

1

это сложнее, если у вас включен выбор. Использовать это.

/ / js

   $templateCache.put('ui-grid/ui-grid-row',
            `
            <div 
            ng-mouseenter="row.isHov = true" 
            ng-mouseleave="row.isHov = false" 
            ng-init="row.isHov = false"
            ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
            ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
            class="ui-grid-cell"
            ng-class="{ 'on': row.isHov, 'ui-grid-row-header-cell': col.isRowHeader }"
            role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
            ui-grid-cell>
          </div>
            `
        );

/ / scss

.ui-grid-cell {


&.on {
    .ui-grid-cell-contents {
        background: red;
    }
}

}

0