AngularJS UI 网格动态覆盖行选择颜色
AngularJS UI Grid overwrite row selection colour dynamically
您好,当动态选择一行时,我试图覆盖 ui 网格的默认颜色,当我选择第一行时,我希望它的颜色与所选其他行的颜色不同
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;
}
}
我希望这是有道理的。欢迎任何建议。这个想法是让第一个选择的行看起来不同于它之后选择的行。
提前致谢
我相信这可能接近你想要的,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。
您好,当动态选择一行时,我试图覆盖 ui 网格的默认颜色,当我选择第一行时,我希望它的颜色与所选其他行的颜色不同
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;
}
}
我希望这是有道理的。欢迎任何建议。这个想法是让第一个选择的行看起来不同于它之后选择的行。 提前致谢
我相信这可能接近你想要的,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。