web-dev-qa-db-ja.com

列の特定の値に基づいて、gグリッドの行全体の背景色を提供する方法は？

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

ag-grid
14
Akshay

以前の答えは多少古くなっており（まだ正しく機能していますが）、グリッドのスタイルをさらに制御できるようになりました。このジョブには、次のようにgetRowStyle(params)を使用できます。

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

明らかに、myColumnToCheckは値をチェックする列（colDefオブジェクトのid/fieldプロパティに入力したのと同じ名前）であり、myValueToCheckは必要な値です行をすべて黄色にする必要があると列は言った。

16
tfrascaroli

回答2は正しいですが、使用されている構文は間違っており、それを整理しようとするといくつかの問題が発生しました。たとえば、barfedされたanswer 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;
    }
}
2
Jeff Papineau

これが他の人の役に立つことを願っています。 AGグリッドを含むすべてのテーブルまたはグリッドでの非常に一般的な使用例は、パフォーマンスの高い方法でテーブル全体の行全体の偶数/奇数の背景色を設定することです。また、これはソート時にも機能する必要があります。

AG-GRIDでこれを行う方法はすべて間違っています。並べ替えなしでも機能しますが、並べ替えを使用すると適切に更新されません。これは、ag-gridチームがこの問題で言及している何か https://github.com/ag-grid/ag-grid-react/issues/77 が初期化時間のプロパティとして使用されているためです。

// Initialization problem
getRowClass = (params) => {
    if (params.node.rowIndex % 2 === 0) {
        return this.props.classes.rowEven;
    }
};
<AgGridReact
    getRowClass={this.getRowClass}
>

// Initialization problem
getRowStyle = (params) => {
    if (params.node.rowIndex % 2 === 0) {
        return this.props.classes.rowEven;
    }
};
<AgGridReact
    getRowStyle={this.getRowStyle}
>

// Initialization problem
rowClassRules = {
    rowEven: 'node.rowIndex % 2 === 0',
}
rowClassRules = {
    rowEven: (params) => params.node.rowIndex % 2 === 0,
}
<AgGridReact
    rowClassRules={this.rowClassRules}
>

// Trying to change the key so a rerender happens
// Grid also listens to this so an infinite loop is likely
sortChanged = (data) => {
    this.setState({ sort: Math.random()})
}
<AgGridReact
    key={this.state.sort}
    onSortChanged={this.sortChanged}
>

基本的に、グリッド内のほとんどのものは一度だけ読み込まれ、再度読み込まれることはありません。おそらく、レンダリング上の理由からパフォーマンス上の理由からです。

上記のいずれかを実行するときにソートすると、この問題が発生します。 bunched up evens and odds

THE FOLLOWIUNG IS EVENを達成する正しい方法ODD COLORING：ag-gridに偶数/奇数の機能を追加する正しい方法は、カスタムCSSスタイルを次のように適用することです続く：

ここのドキュメントで言及されているように、ag変数を上書き/使用する必要があります： https://www.ag-grid.com/javascript-grid-styling/#customizing-sass-variables

この場合の変数の名前は、.ag-grid-evenクラス名、または.ag-grid-oddクラス名です。もちろん、視認性を高めるために交互の色が必要な場合にのみ必要です。私たちの目的には、1つだけ必要でした。

このプロセスがリポジトリでどのように見えるかを次に示します。1.これらのag-class変数名の一部を上書き/使用するカスタムcssファイルを作成します。これをag-theme-custom.cssと呼びます（cssファイルである必要があると思います）。

custom theme file example one

custom theme file example 2

注：sass変数もあるので、このファイルには、cssに追加しているこの色は変数$ GREY_100の値なので、その部分は必要ありません。

import the file

Example of passing this stuff into the parent wrapper around the component

これで同じ結果が得られますが、並べ替えを行っても機能します。 result

1
kmwarter

偶数行と奇数行に異なる色を設定して、どのような方法でもそれを行うことができます。

    $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)'}
       }
    };
1
Jatin Kakkar

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

次の列の定義を参照してください

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

すべての列に対してこれを行う必要があります。

これがchangeRowColor関数です。

function changeRowColor(params) {

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

}

3番目のセルの値が100の場合、行の色を変更します。

0
Charlie