如何在angular-ui-grid中對特定值進行着色？

Question

我試圖根據它在新的angular-ui-grid 3.0 rc12中的值來着色，但我無法做到。 以下代碼用於以前的版本（ngGrid）：

$scope.gridOptions =
    data: 'data.sites'
    tabIndex: -1
    enableSorting: true
    noTabInterference: true
    enableColumnResizing: true
    enableCellSelection: true
    columnDefs: [
      {field: 'sv_name', displayName: 'Nombre'}
      {field: 'sv_code', displayName: 'Placa'}
      {field: 'count', displayName: 'Cuenta'}
    ]
    rowTemplate: """<div ng-class="{green: true, blue: row.getProperty('count') === 1}"
                         ng-repeat="col in colContainer.renderedColumns track by col.colDef.name"
                         class="ui-grid-cell"
                         ui-grid-cell></div>"""

和相應的CSS：

.grid {
  width: 100%;
  height: 250px;
}

.green {
  background-color: #2dff07;
  color: #006400;
}

.blue {
  background-color: #1fe0f0;
  color: #153ff0;
}

這里的問題是表達式：

row.getProperty('count') === 1

不再像在ngGrid中那樣工作了。 任何關於如何在angular-ui-grid中實現相同的猜測（ ui-grid.info ）

非常感謝！

Answer 1

新的ui-grid具有cellClass的特殊屬性：

  $scope.gridOptions = {
    enableSorting: true,
    data:'myData',
    columnDefs: [
      { field: 'sv_name', displayName: 'Nombre'},
      {field: 'sv_code', displayName: 'Placa'},
      { field: 'count', displayName: 'Cuenta',
        cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
          if (grid.getCellValue(row,col) == 1) {
            return 'blue';
          }
          return 'green';
        }
      }
    ]
  };

看看他的Plunker

請注意，我用紅色 ，因為它是更好地看到和攪拌最大的困惑做出了一流的綠色顏色:-)

更新：

這是行着色的解決方案。

像這樣寫你的rowTemplate：

  var rowtpl='<div ng-class="{\'green\':true, \'blue\':row.entity.count==1 }"><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>';

這是分叉的Plunker

請注意，背景顏色會被單元格背景覆蓋。 自己找一個方法:-)

對不起，您的問題最初被誤讀了。 我將cellClass部分留在這個答案中，萬一有人可能需要它。

Answer 2

請注意，背景顏色會被單元格背景覆蓋。 自己找一個方法:-)

根據前面的答案，如果要覆蓋行級別的背景顏色，可以使用：

.ui-grid-row .ui-grid-cell {
   background-color: inherit !important;
}

Answer 3

您只需使用特定的css類即可

.invalidated {
background-color: #f2dede !important;
}

並使用'invalidated'字段在行模板div上添加ng-class或調用函數（示例在plnkr中）：

<div ng-class="{invalidated: row.entity.invalidated}"

這是plunkr http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

希望有所幫助。

Answer 4

請試試這個
see the code here http://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info 。
我已經介紹了很多基於場景的單元格顏色。

1. 負值單元格將以紅色顯示
2. 臟的細胞將是黃色的。
3. 可編輯的單元格將為白色
4. NonEditable細胞將是灰色的
5. 總價值細胞將是DARKGREYED

試試看。 也許你可以從中獲取一些知識/想法。

Answer 5

@Naushad KM，如果有人在$ http調用后必須進行實時小區驗證。

這就是它正在做的事情：

1. 在可編輯行中輸入值。
2. 在焦點松散（模糊）時，進行$ http調用。
3. 使用返回的數據驗證輸入值。
4. 有效值為綠色，無效為紅色。

Example ： Plunker