ng-grid – angular-ui-grid中所选行的自定义颜色

发布时间：2020-12-17 17:53:50 所属栏目：安全来源：网络整理

导读：我想改变角度-ui网格的单元格/行颜色.从文档中我似乎应该使用cellClass.我想要两种颜色用于条纹外观,另一种颜色用于当前选定的行. 在我的columnDefs中,我使用一个函数来确定正确的cellClass.这在首次加载时非常有效. $scope.getCellClass = function (grid,r

我想改变角度-ui网格的单元格/行颜色.从文档中我似乎应该使用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和/或查看this plunker中的第二个控制器,将选择从单个单元格扩展到整个行.

我还创建了一个新的plunker,它显示了如何实现行选择以及如何更改行颜色默认值.是的,我知道这是真正的花哨着色 – 我认为这将有助于真正得到重点:).你可以在custom.css中看到与unustomized 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;
}

如果您需要更多指示,请告诉我:)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!