Angular UI-网格条件着色选择
Angular UI-Grid conditional coloring selection
我想根据网格中的数据应用条件着色。
我为此使用了 columnDefs 中的 cellClass 函数。
我的问题是这些 类 不会在选择更改时更新,而且我无法为选定的行定义颜色并且也有条件着色。
因此,对于前一些行,根据数据显示为红色,当它们被选中时,它们的颜色应该是更深的红色,以显示选择和条件。
有什么办法可以实现吗?
这就是我试图做的,但显然它不会工作,因为选择更改时不会调用此函数:
vm.getCellHighlight = function(grid, row, col, rowRenderIndex, colRenderIndex) {
var rowStatus = row.entity.isChild ? grid.parentRow.entity.transactionItemStatus : row.entity.transactionItemStatus;
var rowSelected = row.isSelected ? 'Selected' : '';
var rowType = '';
if (rowStatus == ticketStateStorno){
rowType = 'Storno';
}
if (rowStatus == ticketStateUsed){
rowType = 'Used';
}
return (rowRenderIndex % 2)? 'searchSalesGridHighlight' + rowType + 'Dark' + rowSelected : 'searchSalesGridHighlight' + rowType + 'Light' + rowSelected;
};
我相信这可能接近您想要的按位。
JavaScript/AngularJS 控制器:
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
var colorRowTemplate =
//same as normal template, but extra ng-class for old people: 'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected)
"<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=\"{'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected), 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
$scope.gridOptions = {
enableSelectAll: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableFullRowSelection: true,
rowTemplate: colorRowTemplate,
showGridFooter: true
}
$http.get('data.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
这是一个工作的 Plunker,http://plnkr.co/edit/Yt7jQf6044YKzyG2CJtg?p=preview。
我想根据网格中的数据应用条件着色。 我为此使用了 columnDefs 中的 cellClass 函数。 我的问题是这些 类 不会在选择更改时更新,而且我无法为选定的行定义颜色并且也有条件着色。 因此,对于前一些行,根据数据显示为红色,当它们被选中时,它们的颜色应该是更深的红色,以显示选择和条件。
有什么办法可以实现吗?
这就是我试图做的,但显然它不会工作,因为选择更改时不会调用此函数:
vm.getCellHighlight = function(grid, row, col, rowRenderIndex, colRenderIndex) {
var rowStatus = row.entity.isChild ? grid.parentRow.entity.transactionItemStatus : row.entity.transactionItemStatus;
var rowSelected = row.isSelected ? 'Selected' : '';
var rowType = '';
if (rowStatus == ticketStateStorno){
rowType = 'Storno';
}
if (rowStatus == ticketStateUsed){
rowType = 'Used';
}
return (rowRenderIndex % 2)? 'searchSalesGridHighlight' + rowType + 'Dark' + rowSelected : 'searchSalesGridHighlight' + rowType + 'Light' + rowSelected;
};
我相信这可能接近您想要的按位。
JavaScript/AngularJS 控制器:
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
var colorRowTemplate =
//same as normal template, but extra ng-class for old people: 'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected)
"<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=\"{'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected), 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
$scope.gridOptions = {
enableSelectAll: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableFullRowSelection: true,
rowTemplate: colorRowTemplate,
showGridFooter: true
}
$http.get('data.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
这是一个工作的 Plunker,http://plnkr.co/edit/Yt7jQf6044YKzyG2CJtg?p=preview。