列内の特定の値に基づいて、グリッド内の行全体の背景色を指定するにはどうすればよいですか？

Question

列内の条件に基づいて、グリッド内の行全体の背景色を指定する必要があります。列内の特定の値に基づいて行全体が色付けされているような例は見つかりませんでした。

Answer 1

前の回答が多少時代遅れである（ただし、依然として正しいと作業）と今は上いくつかのより多くの制御を持っている場合は、行の色を変更しますグリッドのスタイリングあなたはこのように、この仕事のためにgetRowStyle(params)を使用することができます。

gridOptions.getRowStyle(params) { 
    if (params.data.myColumnToCheck === myValueToCheck) { 
     return {'background-color': 'yellow'} 
    } 
    return null; 
} 

もちろん、myColumnToCheckはあなたが照らし合わせて値をチェックしている列になります（同じ名前あなたcolDefオブジェクトのID /フィールドのプロパティで入力） 、myValueToCheckは、列がすべて黄色にするために必要な列の値になります。

Answer 2

1つのコマンドで行全体の背景色を変更することはできません。 columnDefsのcellStyleコールバック設定を介して行う必要があります。このコールバックは、行の各セルごとに呼び出されます。すべてのセルの色を変更して行の色を変更する必要があります。

はあなたがすべてのあなたの列のためにこれを行う必要があり、次のカラム定義

{ 
    headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor 
} 

を参照してください。

ここにはchangeRowColorの機能があります。

function changeRowColor(params) { 

    if(params.node.data[4] === 100){ 
     return {'background-color': 'yellow'};  
    } 

} 

第3のセルの値は100

Answer 3

Answer 2は正しいですが、使用される構文が間違っていて、いくつかの問題が発生しました。たとえば、答え2のコードを最小化しようとしました。それはうまくいったが、私が見る限り、それは正しい構文ではない。

注、これはインラインで行うことができ、または外部 機能、2つの異なる方法で：

別の関数：

vm.gridOptions = { 
    columnDefs: columnDefs, 
    getRowStyle: getRowStyleScheduled 
} 

function getRowStyleScheduled(params) { 
    if (params.selected && params.data.status === 'SCHEDULED') { 
     return { 
      'background-color': '#455A64', 
      'color': '#9AA3A8' 
    } 
    } else if (params.data.status === 'SCHEDULED') { 
     return { 
      'background-color': '#4CAF50', 
      'color': '#F4F8F5' 
     }; 
    } 
    return null; 
}; 

インライン：

vm.gridOptions = { 
    columnDefs: columnDefs, 
    getRowStyle: function(params) { 
     if (params.selected && params.data.status === 'SCHEDULED') { 
      return { 
       'background-color': '#455A64', 
       'color': '#9AA3A8' 
      }; 
     } else if (params.data.status === 'SCHEDULED') { 
      return { 
       'background-color': '#4CAF50', 
       'color': '#F4F8F5' 
      }; 
     } 
     return null; 
    } 
} 

Answer 4

Iは、異なる色を設定します偶数行と奇数行の場合は、どのような方法でも実行できます。

$scope.gridOptions.getRowStyle = function getRowStyleScheduled(params){  
     if(parseInt(params.node.id)%2==0) { 
      return {'background-color': 'rgb(87, 90, 90)'} 
     }else { 
      return {'background-color': 'rgb(74, 72, 72)'} 
     } 
    };