2021/05/05

MANUAL

FAQ:サンプルコード:一覧画面で数値の範囲によってセルの色を変える

## 概要 一覧画面で、指定した数値項目の範囲によってそれぞれセルを別の背景色に変更します。 ![image](/binaries/0e37ecefc2b647e68fe34fc30f94b983) ## スクリプト概要 数値Cの値が10,000未満であれば背景を赤、20,000〜30,000未満であれば黄色、30,000以上であれば青に変更します。背景色の指定は、事前に設定したスタイルを使用します。 ## 事前準備 1. 「記録テーブル」を作成します。 1. 「数値C(NumC)」を「[一覧](/manual/table-management-grid)」で有効化します。 1. 以下の「[スタイル](/manual/table-management-style)」を「新規作成」します。 1. 以下の「[サーバスクリプト](/manual/table-management-server-script)」を「新規作成」します。 「条件」は「行表示の前」を選択します。 ##### CSS ``` /* 合計が10000円未満 */ .cell-blue { background-color: blue; color: white; } /* 合計が10000円以上、30000円未満 */ .cell-yellow { background-color: yellow; color: black; } /* 合計が30000円以上 */ .cell-red { background-color: red; color: black; } ``` 一覧画面で「数値C(NumC)」の値の範囲によってセルの背景色を変更する以下のサーバサイドスクリプトを記述します。 ##### JavaScript ``` let total = model.NumC if (total < 10000) { columns.NumC.ExtendedCellCss = 'cell-blue'; } else if (total >= 10000 && total < 30000) { columns.NumC.ExtendedCellCss = 'cell-yellow'; } else if (total >= 30000) { columns.NumC.ExtendedCellCss = 'cell-red'; } ``` ## 注意事項 こちらは[サーバスクリプト](/manual/2285463)機能では使用できません。 ## 関連情報 ・[テーブルの管理:サーバスクリプト](/manual/2285463) ・[オブジェクトごとの実行タイミング](/manual/2543065)
このページをシェアする