这是我的代码
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>
这是我的Plunker：http://plnkr.co/edit/972s2MSbFDw2DtnMOmnY?p=preview 在上面的代码中，我在Ui-Grid中有两行数据。当我选择第一行时，我想通过使用角度ui网格为所选行应用背景颜色。 我在css文件中编写以下类
.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
background-color: red;
}
但不影响所选的行背景颜色。
答案 0 :(得分：2)
使用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);
}
}
};
})
现在让我们修改你的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>
我还编辑了你的plunker： - http://plnkr.co/edit/KgKm5s?p=preview
谢谢。
答案 1 :(得分：1)
如果将指令ui-grid-selection添加到网格中，则会得到LHS列以选择行。
然后你可以像这样添加你的风格（添加网格ID）：
#grid1 .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
background-color: red;
}
你的plunker更新了答案：