web-dev-qa-db-ja.com

angle-ui-gridの特定の値で行を色付けする方法は？

新しいangle-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のように機能しなくなりました。 angle-ui-gridで同じことを達成する方法の推測（ i-grid.info ）

どうもありがとう！

javascripthtmlcssangularjsangular-ui-grid
19
tebanep

新しいUIグリッドには、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 を見てください

greenのクラスredの色を作成したことに注意してください最大の混乱を見て、揺さぶります:-)

更新：

行の色付けのソリューションを次に示します。

次のように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>';

これは forked Plunker です

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

質問の最初の誤読でごめんなさい。誰かがそれを必要とするかもしれないので、私はこの答えにcellClass部分を残します。

34
mainguy

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

前の回答に基づいて、行レベルで背景色を上書きしたい場合、これを使用できます：

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

あなたは単に特定の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

お役に立てば幸いです。

7
Patrik Bego

これを試してください
see the code herehttp://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info 。
多くのシナリオベースのセルの色を取り上げました。

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

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

2
Naushad KM

@Naushad KMおよび$ http呼び出し後に誰かがリアルタイムのセル検証を行う必要がある場合。

これはそれがやっていることです：

  1. 編集可能な行に値を入力します。
  2. フォーカスが緩い（ぼかし）で、$ http呼び出しを行います。
  3. 入力値と返されたデータを検証します。
  4. 有効な値は緑、無効な値は赤です。

Example： Plunker

1
Rajush