根据角UI电网字段值着色行 [英] Coloring row based on a field value in Angular UI Grid

问题描述

我试图颜色取决于最新的角UI的网格中的每一行的字段值的行。此外，我们不要有任何特别的列定义，因为所有的列也使用UI格选择产生dynamically.We。

我已经经历了一些答案阅读和发现，我们可以通过使用rowTemplate做到这一点。这是我行的模板

  rowTemplate：'＆LT; D​​IV纳克级={\\灰色\\'：row.entity.Locked ==真}＆GT; ＆LT; D​​IV NG重复=（colRenderIndex，COL）的colContainer.renderedColumns轨道由col.uid级=UI网格细胞NG-CLASS ={UI格行头单元： col.isRowHeader}UI-格电池＆gt;＆LT; / DIV＆GT;＆LT; / DIV＆GT;'
 

我试图颜色相应的行为灰色，如果在锁定列中的值是真在里面。但它不工作。是我行的模板正确或是否有任何其他的方式来达致这？

  $ scope.gridOptions = {
            showGridFooter：真实，
            数据：myData的，
            paginationPageSizes：[10，15，20]，
            paginationPageSize：10，
            enableColumnResizing：真实，
            rowTemplate：'＆LT; D​​IV纳克级={\\灰色\\'：row.entity.Locked ==真}＆GT; ＆LT; D​​IV NG重复=（colRenderIndex，COL）的colContainer.renderedColumns轨道由col.uid级=UI网格细胞NG-CLASS ={UI格行头单元： col.isRowHeader}UI-格电池＆gt;＆LT; / DIV＆GT;＆LT; / DIV＆GT;，            //注册电网API            onRegisterApi：功能（gridApi）{                //设置gridApi范围上
                $ scope.gridApi = gridApi;                //获取选定的行
                gridApi.selection.on.rowSelectionChanged（$范围，功能（行）{
                    VAR味精=行选择'+ row.isSelected;
                    的console.log（味精）;
                    $ scope.mySelectedRows = $ scope.gridApi.selection.getSelectedRows（）;
                    的console.log（$ scope.mySelectedRows）;                }）;            }
    };//请求获得网格数据    $ http.get（WS / datareserve'）。成功（功能（数据）{
        $ scope.myData =数据;
        的console.log（$ scope.myData）;        angular.forEach（数据[0]，功能（值，键）{            如果（键==锁定）{
                $ scope.gridOptions.columnDefs.push（{域：按键，显示名：锁定，宽度：150}）;
            }            其他{
                $ scope.gridOptions.columnDefs.push（{域：按键，显示名：关键，宽度：150}）;
            }        }）;
        //$scope.gridOptions.rowTemplate='<div风格=\\'颜色\\'：\\'红色\\'＆GT;'+'＆LT; D​​IV NG重复=（colRenderIndex，COL）的colContainer.renderedColumns轨道由col.colDef.name级=UI网格细胞NG-CLASS ={\\'UI的网格行标题单元\\'：col.isRowHeader}UI-格电池＆gt;＆LT; / DIV＆GT;'+'＆LT; / DIV＆GT;';    }）错误（功能（数据）{
        的console.log（请求失败+ $ scope.gridOptions.data）;
    }）;
 

解决方案

您的模板是正确的，电池使用的.ui网格单元，内容类的风格，让您可以与您当前的模板喜欢这种风格的。

  .grey的.ui-网格细胞内容
{
  背景色：红色;
}
 

在这里看到一个例子 http://plnkr.co/edit/GMO3e71U4gN3HWvNMp7O?p = preVIEW

I'm trying to color a row depending on each row's field value in the latest angular-ui-grid. Also we dont have any particular column definitions since all the columns are generated dynamically.We are also using ui grid selection.

I have read through some answers and found that we can do it by using rowTemplate. Here is my row Template

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>'

I am trying to color the respective row as grey, if the value in "Locked" column is "True" in it. But it is not working. Is my row template correct or is there any other way to acheive this ?

$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);
    });

解决方案

Your template is correct, the cell is styled using the .ui-grid-cell-contents class, so you can style it like this with your current template.

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

See an example here http://plnkr.co/edit/GMO3e71U4gN3HWvNMp7O?p=preview

这篇关于根据角UI电网字段值着色行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！