2021/06/10

MANUAL

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

## 概要 「[サーバスクリプト](/manual/table-management-server-script)」で「[一覧画面](/manual/table-grid)」上の指定した「[数値項目](/manual/table-management-num)」の範囲によって「[セルCSS](/manual/table-management-extended-cell-css)」を割り当て、セルの背景色を変更します。 ![image](/binaries/0e37ecefc2b647e68fe34fc30f94b983) ## 操作手順 1. 「[テーブル](/manual/table)」を作成します。 1. 「数値C(NumC)」を「[一覧画面の項目の設定](/manual/table-management-grid-columns)」で有効化します。 1. 以下の「[サーバスクリプト](/manual/table-management-server-script)」を「新規作成」します。 「条件」は「行表示の前」を選択します。 1. 以下の「[スタイル](/manual/table-management-style)」を「新規作成」します。 ##### JavaScript(サーバスクリプト) ``` // 数値Cの値が10,000未満であれば背景を赤、20,000〜30,000未満であれば黄色、30,000以上であれば青に変更します。背景色の指定は、事前に設定したスタイルを使用します。 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'; } ``` ##### 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; } ``` ## 関連情報 <div id="ManualList"><ul><li><a href="/manual/table">テーブル機能</a><span>2021/05/30 up</span></li> <li><a href="/manual/table-grid">テーブル機能:レコードの一覧画面</a><span>2021/05/09 up</span></li></ul></article> <ul><li><a href="/manual/table-management-num">テーブルの管理:項目:数値</a><span>2021/05/09 up</span></li></ul></article> <ul><li><a href="/manual/table-management-grid-columns">テーブルの管理:一覧画面:一覧画面の項目の設定</a><span>2021/05/10 up</span></li> <li><a href="/manual/table-management-grid-column-settings">テーブルの管理:一覧画面:項目の詳細設定</a><span>2021/05/09 up</span></li> <li><a href="/manual/table-management-extended-cell-css">テーブルの管理:一覧画面:項目の詳細設定:セルCSS</a><span>2021/06/10 up</span></li></ul></article> <ul><li><a href="/manual/table-management-style">テーブルの管理:スタイル</a><span>2021/05/11 up</span></li> <li><a href="/manual/table-management-server-script">テーブルの管理:サーバスクリプト</a><span>2021/05/23 up</span></li></ul></article> <ul><li><a href="/manual/server-script">開発者向け機能:サーバスクリプト</a><span>2021/08/20 up</span></li></ul></article> <ul><li><a href="/manual/style">開発者向け機能:スタイル</a><span>2021/06/12 up</span></li></ul></article> <ul><li><a href="/manual/faq-server-script-log">FAQ:サーバスクリプトのエラーログを出力する</a><span>2021/06/24 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
このページをシェアする