根据 Angular UI 网格中的字段值对行着色

Question

我正在尝试根据最新的 angular-ui- 网格中每一行的字段值为一行着色。此外，我们没有任何特定的列定义，因为所有列都是生成的 dynamically.We 也使用 ui 网格选择。

我已经阅读了一些答案，发现我们可以使用 rowTemplate 来完成。这是我的行模板

rowTemplate:'<div ng-class="{ \'grey\':row.entity.Locked=="True" }"> <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ "ui-grid-row-header-cell": col.isRowHeader }"  ui-grid-cell></div></div>'

如果 "Locked" 列中的值是 "True"，我正在尝试将相应的行着色为灰色。但它不起作用。我的行模板是否正确或是否有任何其他方法可以实现此目的？

$scope.gridOptions={
            showGridFooter: true,
            data:'myData',
            paginationPageSizes: [10, 15, 20],
            paginationPageSize: 10,
            enableColumnResizing: true,
            rowTemplate:'<div ng-class="{ \'grey\':row.entity.Locked=="True" }"> <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ "ui-grid-row-header-cell": col.isRowHeader }"  ui-grid-cell></div></div>',

            // Registering  Grid API

            onRegisterApi : function(gridApi){

                // Set gridApi on scope
                $scope.gridApi = gridApi;

                // Getting Selected rows
                gridApi.selection.on.rowSelectionChanged($scope,function(row){
                    var msg = 'row selected ' + row.isSelected;
                    console.log(msg);
                    $scope.mySelectedRows= $scope.gridApi.selection.getSelectedRows();  
                    console.log( $scope.mySelectedRows);

                });

            }
    };

// Request to get the Grid Data

    $http.get('WS/datareserve').success(function(data){
        $scope.myData=data;
        console.log( $scope.myData);

        angular.forEach(data[0], function(value, key){

            if(key=="Locked"){
                $scope.gridOptions.columnDefs.push({ field: key, displayName: "LOCKED", width: 150});
            }

            else{
                $scope.gridOptions.columnDefs.push({ field: key, displayName: key, width: 150});
            }

        });
        //$scope.gridOptions.rowTemplate='<div style=" \'color\' : \'red\' ">'+'<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>'+'</div>';

    }).error(function(data){
        console.log("Request failed "+ $scope.gridOptions.data);
    });

Answer 1

您的模板是正确的，单元格的样式使用 .ui-grid-cell-contents class，因此您可以使用当前模板设置样式。

.grey .ui-grid-cell-contents
{
  background-color:red;
}

请在此处查看示例 http://plnkr.co/edit/GMO3e71U4gN3HWvNMp7O?p=preview

根据 Angular UI 网格中的字段值对行着色

Coloring row based on a field value in Angular UI Grid

javascript

angularjs

angular-ui-grid