AngularJS UI Grid動態地覆蓋行選擇顏色

您好，我試圖覆蓋默認顏色的UI網格，當一個行被選中動態時，當我選擇第一行我希望它有一個不同的顏色比選定的其餘行AngularJS UI Grid動態地覆蓋行選擇顏色

if($scope.mySelections.length==1){ 
    //here overwrite the css 
    .ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell{ 
     background-color: #efe8ed!important; 
    } 
}

我希望這是有道理的。歡迎任何建議。這個想法是讓第一個選定的行看起來不同於之後選定的行。在此先感謝

來源

2017-02-23 Mero

我相信這可能接近你想要的，梅羅。

的JavaScript/AngularJS控制器：

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) { 
    var colorRowTemplate = 
    //same as normal template, but extra ng-class for firstSelection: 'first-selection':row.entity.firstSelection 
    "<div 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=\"{'first-selection':row.entity.firstSelection, 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>"; 
    $scope.gridOnRegisterApi = function(gridApi) { 
    gridApi.selection.on.rowSelectionChanged($scope, function(row) { 
     row.entity.firstSelection = false; 
     if (row.isSelected) row.entity.firstSelection = (gridApi.selection.getSelectedCount() == 1); 
    }); 
    }; 
    $scope.gridOptions = { 
    enableSelectAll: true, 
    enableRowSelection: true, 
    enableRowHeaderSelection: false, 
    enableFullRowSelection: true, 
    rowTemplate: colorRowTemplate, 
    showGridFooter: true, 
    onRegisterApi: $scope.gridOnRegisterApi 
    } 
    $http.get('data.json') 
    .then(function(response) { 
     $scope.gridOptions.data = response.data; 
    }); 
}]);

這裏的工作Plunker，http://plnkr.co/edit/radkmw2T7wRCuiJ06Cyj?p=preview。

來源

2017-02-24 03:30:45

AngularJS UI Grid動態地覆蓋行選擇顏色

回答

相關問題