Question

我有一个包含两列firstName和lastName的ui-grid。我在第一列（firstName）上将background-color设置为蓝色。如果我单击lastName标题列，我想将lastName列更改为蓝色，将firstName列更改为正常。

我用谷歌查看并搜索过但无法找到一个例子。

我该怎么做？

这是我的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");
    }
  }
 ]);

这是我的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>

这是我的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;
}

Answer 1

你可以使用普通的旧CSS 单击标题时，会向其添加属性：咏叹调排序=＆＃34;升序＆＃34;或咏叹调排序=＆＃34;降序＆＃34;

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

更改单元格颜色angularjs和ui-grid

1 个答案: