Навигация по ячейкам AngularJS не работает при использовании с шаблоном ячейки

У меня есть следующий код в моем контроллере:

app.controller("homeController", homeController);
homeController.$inject = ["ui.grid.cellNav", "$scope"];

$scope.gridOptions = {
        enableRowSelection: true,
        enableSelectAll: true,
        modifierKeysToMultiSelect: false,        
        enableRowHeaderSelection: false,
    };


vm.objectViewGridOptions = {
    enableColumnMenus: false,
    enableSorting: true,
    enableGridMenu: true,
    angularCompileRows: true,
    multiSelect: false,
    modifierKeysToMultiSelect: false,                        
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    exporterMenuPdf: false,
    onRegisterApi: function (gridApi) {
    //set gridApi on scope
    vm.objectViewGridOptions.gridApi = gridApi;                            
    gridApi.cellNav.on.navigate($scope, function (newRowCol, oldRowCol){                  
                                     vm.objectViewGridOptions.gridApi.selection.selectRow(newRowCol.row.entity);
                                    vm.objectViewGridOptions.gridApi.core.notifyDataChange($scope.gridApi.grid, uiGridConstants.dataChange.COLUMN);
    });
   }       
};


var colDef = [];               

for (var i = 0; i < columnNames.length; i++) {
                    if (i < 4) {
                        colDef.push(
                        {
                            field: columnNames[i],
                            displayName: columnNames[i],
                            width: '100',
                            // Highlighting first row in ui-grid
                            cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents"   ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,true)}">{{ COL_FIELD }}</div>',
                            sortingAlgorithm: sort
                        });
                    }
                    else
                        colDef.push(
                        {
                            field: columnNames[i],
                            displayName: columnNames[i],
                            width: '100',
                            cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,false)}" >{{ COL_FIELD }}</div>',
                            sortingAlgorithm: sort
                        });
                }

vm.objectViewGridOptions.columnDefs = colDef;

И в моем HTML:

<div style="clear:both;" ui-grid="vm.objectViewGridOptions" ng-if="vm.objectViewGridOptions.data" ui-grid-resize-columns ui-grid-cellnav ui-grid-move-columns ui-grid-exporter class="objectviewgrid"></div>

Я использовал cellTemplate, чтобы задать цвет фона ячейкам сетки, и ui-grid-cellNav, чтобы перемещаться между ячейками сетки.

Если я использую ui-grid-cellNav вместе с cellTemplate, навигация по ячейкам не работает. Если я закомментирую код cellTemplate, то навигация по ячейкам будет работать нормально.

Где меня бьют? Забудьте о логике цикла и все такое. Я не могу разместить весь код здесь. Это уже выглядит коряво.


angularjs celltemplate
person Naren    schedule 18.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я использовал cellClass и cellStyle вместо cellTemplate. Вот мой код в моем контроллере:

for (var i = 0; i < columnNames.length; i++) {
                        if (i < 4) {
                            colDef.push(
                            {
                                field: columnNames[i],
                                displayName: columnNames[i],
                                width: '100',
                                // fix for highlighting first row in ui-grid
                                //cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents"   ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,true)}">{{ COL_FIELD }}</div>',
                                cellClass: 'ui-grid-cell-contents',
                                cellStyle: { 'background-color': 'backgroundColor(row, true)' },
                                sortingAlgorithm: sort
                            });
                        }
                        else
                            colDef.push(
                            {
                                field: columnNames[i],
                                displayName: columnNames[i],
                                width: '100',
                                //cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,false)}" >{{ COL_FIELD }}</div>',
                                cellClass: 'ui-grid-cell-contents',
                                cellStyle: { 'background-color': 'backgroundColor(row, false)' },
                                sortingAlgorithm: sort
                            });
                    }

Вышеприведенный код позволил мне использовать как пользовательский стиль ячейки, так и CellNav вместе.

person Naren    schedule 21.03.2016