angular-ui-网格中选定行的自定义颜色
Custom color of selected row in angular-ui-grid
我想更改 angular-ui- 网格的 cell/row 颜色。从文档看来我应该为此使用 cellClass。我想要两种颜色的条纹外观和另一种颜色的当前选定行。
在我的 columnDefs 中,我使用一个函数来确定正确的 cellClass。这在第一次加载时非常有效。
$scope.getCellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (row.isSelected)
return 'my-grid-cell-selected';
if ((rowRenderIndex % 2) == 0) {
return 'my-grid-cell1';
}
else {
return 'my-grid-cell2';
}
}
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
columnDefs: [
{ field: 'EventDate', cellClass: $scope.getCellClass },
...
]
};
但是,我不知道如何更新所选行的所有单元格的 cellClass。
我有以下代码,我认为它会更新选定的行,但没有任何反应,尽管我可以看到它被调用了。
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function(row){
//??????
gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
});
};
如果没有我的 cellClasses,所选行的颜色会有所不同。
知道如何为所选行实现自定义颜色吗?
我认为最好和最简单的方法是使用提供的 ui-grid customizer!
具体来说,您要更改奇数行和偶数行的背景颜色是更改@rowcoloreven 和@rowcolorodd 字段。
要更改当前所选行的颜色,请在定制器中更新@focusedcell 属性 并按照 this tutorial and/or look at the second controller in this plunker 将您的选择范围从单个单元格扩展到整行。
我还创建了一个新的 plunker,它展示了如何实现行选择以及如何更改行颜色默认值。是的,我知道这真的很花哨——我认为这有助于真正理解要点:)。您可以在 custom.css 中看到与未自定义的 ui-grid css 实际上不同的是
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffff33;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ff22ff;
}
.ui-grid-cell-focus {
outline: 0;
background-color: #b3c4c7;
}
如果您需要更多指导,请告诉我:)
这是使用 CSS 的方法:
.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
color: #fff;
background-color: blue;
}
.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
outline: 0;
background-color: blue;
}
.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
color: #fff;
background-color: blue;
}
我想更改 angular-ui- 网格的 cell/row 颜色。从文档看来我应该为此使用 cellClass。我想要两种颜色的条纹外观和另一种颜色的当前选定行。
在我的 columnDefs 中,我使用一个函数来确定正确的 cellClass。这在第一次加载时非常有效。
$scope.getCellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (row.isSelected)
return 'my-grid-cell-selected';
if ((rowRenderIndex % 2) == 0) {
return 'my-grid-cell1';
}
else {
return 'my-grid-cell2';
}
}
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
columnDefs: [
{ field: 'EventDate', cellClass: $scope.getCellClass },
...
]
};
但是,我不知道如何更新所选行的所有单元格的 cellClass。 我有以下代码,我认为它会更新选定的行,但没有任何反应,尽管我可以看到它被调用了。
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function(row){
//??????
gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
});
};
如果没有我的 cellClasses,所选行的颜色会有所不同。
知道如何为所选行实现自定义颜色吗?
我认为最好和最简单的方法是使用提供的 ui-grid customizer!
具体来说,您要更改奇数行和偶数行的背景颜色是更改@rowcoloreven 和@rowcolorodd 字段。
要更改当前所选行的颜色,请在定制器中更新@focusedcell 属性 并按照 this tutorial and/or look at the second controller in this plunker 将您的选择范围从单个单元格扩展到整行。
我还创建了一个新的 plunker,它展示了如何实现行选择以及如何更改行颜色默认值。是的,我知道这真的很花哨——我认为这有助于真正理解要点:)。您可以在 custom.css 中看到与未自定义的 ui-grid css 实际上不同的是
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffff33;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ff22ff;
}
.ui-grid-cell-focus {
outline: 0;
background-color: #b3c4c7;
}
如果您需要更多指导,请告诉我:)
这是使用 CSS 的方法:
.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
color: #fff;
background-color: blue;
}
.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
outline: 0;
background-color: blue;
}
.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
color: #fff;
background-color: blue;
}