21

新しい 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 )で同じことを達成する方法の推測

どうもありがとう！

4

5 に答える 5

16

background-color はセルの背景によって上書きされることに注意してください。自分でこれを回避する方法を見つけてください:-)

前の回答に基づいて、行レベルで背景色をオーバーライドする場合は、これを使用できます。

.ui-grid-row .ui-grid-cell {
   background-color: inherit !important;
}
于 2014-11-18T09:31:51.830 に答える
9

特定のcssクラスを使用するだけです

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

'invalidated' フィールドを使用して行テンプレート div に ng-class を追加するか、関数を呼び出します (例は plkr にあります)。

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

ここにplunkrがありますhttp://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

それが役立つことを願っています。

于 2016-02-21T01:36:09.983 に答える
3


see the code here http://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=infoをお試しください。
のような多くのシナリオベースのセルの色について説明しました。

  1. 負の値のセルは赤色で表示されます
  2. 汚れた細胞は黄色になります。
  3. 編集可能なセルは白になります
  4. 編集不可のセルは灰色になります
  5. 合計値のセルは DARKGREYED になります

試してみる。そこから知識やアイデアをつかむことができるかもしれません。

于 2015-08-27T10:35:14.680 に答える