Changer la couleur de la cellule angularjs et ui-grid

J'ai une ui-grille contenant deux colonnes firstName et lastName. J'ai mis la couleur de fond à bleu sur la première colonne (firstName). Si je clique sur la colonne d'en-tête lastName, je veux changer la colonne lastName en blue et la colonne firstName en normal.Changer la couleur de la cellule angularjs et ui-grid

J'ai regardé et recherché avec google mais n'ai pas pu trouver un exemple là-dessus.

Comment puis-je faire cela?

Voici mes app.js

var app = angular.module('app', ['ngTouch', 'ui.grid']); 

    app.controller('MainCtrl', [ 
    '$scope','uiGridConstants', function($scope, uiGridConstants) { 

    $scope.gridOptions = { 
     columnDefs: [{ 
     name: 'firstName', 
     field: 'firstName', 
     displayName: 'voornaam', 
     width: 200, 
     cellClass: 'columnClassName' 
     }, { 
     name: 'lastName', 
     field: 'lastName', 
     displayName: 'achternaam', 
     width: 200 
     }], 
     data: [{ 
     "firstName": "Cox", 
     "lastName": "Carney", 
     "company": "Enormo", 
     "employed": true 
     }, { 
     "firstName": "Lorraine", 
     "lastName": "Wise", 
     "company": "Comveyer", 
     "employed": false 
     }, { 
     "firstName": "Nancy", 
     "lastName": "Waters", 
     "company": "Fuelton", 
     "employed": false 
     }] 
    }; 

    $scope.loadData = function() { 
     console.log("clicked"); 
    } 
    } 
]);

Voici mon html

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/ui-grid.css"> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
    <script src="js/ui-grid.js"></script> 
    <!-- <script src="/release/ui-grid.css"></script> --> 

    <script src="js/app.js"></script> 
    </head> 
    <body> 
    <div ng-controller="MainCtrl as ctrl"> 
     <div id="grid" ui-grid="gridOptions" class="grid"></div> 
    </div> 
    </body> 
</html>

Voici mon css

.grid { 
    width: 500px; 
    height: 250px; 
} 

.red { 
    color: white; background-color: gray !important; 
} 

.my-css-class { 
    color: blue 
} 

.columnClassName[aria-sort="ascending"], .columnClassName[aria-sort="descending"] { 
    background-color: blue !important; 
}

Source

2017-01-25 baliman

J'ai fait par ng-class dans ng-table. pouvez-vous montrer le code? –

Vous pouvez utiliser le bon vieux CSS, En cliquant sur un en-tête auquel un attribut est ajouté: aria-sort = "ascendant" ou aria-sort = "descendant"

. sortable[aria-sort="ascending"], . sortable[aria-sort="descending"] { 
    background-color: blue; 
}

Source

2017-01-25 09:18:22

comment l'ajoutez-vous dans votre colonneDefs? – baliman

S'il vous plaît joindre un extrait de code –

J'ai ajouté le code, voir début de l'affichage – baliman

Changer la couleur de la cellule angularjs et ui-grid

Répondre

Questions connexes