如何在角ui网格中突出显示选定的行?

This is my code

这是我的代码

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



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

$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
         
        
        ],
        data : [
          {
             "first-name": "Cox",
             "friends": ["friend0"],
             "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
            
          },
          {
             "first-name": "Jim",
             "friends": ["friend1"],
             "address": {street:"123 Street Ave", city:"Bay", zip:"12457"},
            
          }
        ]
      };

}]);

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

This is my Plunker : http://plnkr.co/edit/972s2MSbFDw2DtnMOmnY?p=preview In the above code i have two rows data in Ui-Grid. When i select first row i want to apply background color for that selected row by using angular ui grid. I Write the following class in our css file

这是我的柱塞:http://plnkr.co/edit/972s2MSbFDw2DtnMOmnY?p=预览在上面的代码中，我在Ui-Grid中有两行数据。当我选择第一行时，我想通过使用角ui网格为选定的那一行应用背景色。我在css文件中编写了以下类。

.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
    background-color: red;
 }

But not effected for selected row background color.

但对于所选的行背景颜色没有影响。

2 个解决方案

#1

by using enableRowHeaderSelection: true you can enable row selection . I modified your code. Which are below :- your app.js file looks like this

通过使用enableRowHeaderSelection: true，您可以启用行选择。我修改你的代码。-你的app.js文件是这样的

var app = angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.custom.rowSelection']);

app.filter('zip', function() {
  return function(input, entity) {
    if (entity.getZip() > 30000) {
      return 'Yes';
    } else {
      return 'No';
    }
  };
});

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

  $scope.gridOptions = {
    enableSorting: true,
    multiSelect: false,
    columnDefs: [{
      name: 'firstName',
      field: 'first-name'
    }, {
      name: '1stFriend',
      field: 'friends[0]'
    }, {
      name: 'city',
      field: 'address.city'
    }, {
      name: 'getZip',
      field: 'getZip()',
      enableCellEdit: false
    }, {
      displayName: 'Zip > 3000',
      field: 'getZip()',
      enableCellEdit: false,
      cellFilter: 'zip:row.entity'
    }],
    data: [{
      "first-name": "Cox",
      "friends": ["friend0"],
      "address": {
        street: "301 Dove Ave",
        city: "Laurel",
        zip: "39565"
      },
      "getZip": function() {
        return this.address.zip;
      }
    }, {
      "first-name": "Jim",
      "friends": ["friend1"],
      "address": {
        street: "123 Street Ave",
        city: "Bay",
        zip: "12457"
      },
      "getZip": function() {
        return this.address.zip;
      }
    }]
  };

}]);

angular.module('ui.grid.custom.rowSelection', ['ui.grid'])

.directive('uiGridCell', function($timeout, uiGridSelectionService) {
  return {
    restrict: 'A',
    require: '^uiGrid',
    priority: -200,
    scope: false,
    link: function($scope, $elm, $attr, uiGridCtrl) {
      if ($scope.col.isRowHeader) {
        return;
      }

      var touchStartTime = 0;
      var touchTimeout = 300;

      registerRowSelectionEvents();

      function selectCells(evt) {
        // if we get a click, then stop listening for touchend
        $elm.off('touchend', touchEnd);

        if (evt.shiftKey) {
          uiGridSelectionService.shiftSelect($scope.grid, $scope.row, evt, $scope.grid.options.multiSelect);
        } else if (evt.ctrlKey || evt.metaKey) {
          uiGridSelectionService.toggleRowSelection($scope.grid, $scope.row, evt, $scope.grid.options.multiSelect, $scope.grid.options.noUnselect);
        } else {
          uiGridSelectionService.toggleRowSelection($scope.grid, $scope.row, evt, ($scope.grid.options.multiSelect && !$scope.grid.options.modifierKeysToMultiSelect), $scope.grid.options.noUnselect);
        }
        $scope.$apply();

        // don't re-enable the touchend handler for a little while - some devices generate both, and it will
        // take a little while to move your hand from the mouse to the screen if you have both modes of input
        $timeout(function() {
          $elm.on('touchend', touchEnd);
        }, touchTimeout);
      };

      function touchStart(evt) {
        touchStartTime = (new Date()).getTime();

        // if we get a touch event, then stop listening for click
        $elm.off('click', selectCells);
      };

      function touchEnd(evt) {
        var touchEndTime = (new Date()).getTime();
        var touchTime = touchEndTime - touchStartTime;

        if (touchTime < touchTimeout) {
          // short touch
          selectCells(evt);
        }

        // don't re-enable the click handler for a little while - some devices generate both, and it will
        // take a little while to move your hand from the screen to the mouse if you have both modes of input
        $timeout(function() {
          $elm.on('click', selectCells);
        }, touchTimeout);
      };

      function registerRowSelectionEvents() {
        $elm.addClass('ui-grid-disable-selection');
        $elm.on('touchstart', touchStart);
        $elm.on('touchend', touchEnd);
        $elm.on('click', selectCells);
      }
    }
  };
})

Now lets modified your html page :-

现在让我们修改您的html页面:-

<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/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="http://ui-grid.info/release/ui-grid-unstable.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-edit class="grid"></div>
  </div>


  <script src="app.js"></script>
</body>

</html>

I also edited your plunker :- http://plnkr.co/edit/KgKm5s?p=preview

我还编辑了你的plunker:- http://plnkr.co/edit/kgkmm5s?

Thank you.

谢谢你！

#2

If you add directive ui-grid-selection to your grid, you get column om LHS to select the rows.

如果将指令ui网格选择添加到网格中，就会得到列om LHS来选择行。

Then you can add your style like this (add you grid Id):

然后你可以像这样添加你的样式(添加你的网格Id):

 #grid1 .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
    background-color: red;
 }

Your plunker is updated with answer:

你的插棒是更新的答案:

http://plnkr.co/edit/NM4KzLYBQhuaJG9rfjxg?p=preview

#1