基于 Angular UI Grid 中的字段值着色行

Question

我正在尝试根据最新 angular-ui-grid 中每一行的字段值为一行着色。此外，我们没有任何特定的列定义，因为所有列都是动态生成的。我们也使用 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>'

如果“锁定”列中的值为“真”，我正在尝试将相应的行着色为灰色。但它不起作用。我的行模板是正确的还是有其他方法可以实现这一点？

$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 类设置样式的，因此您可以使用当前模板来设置它的样式。

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

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