future-architect/cheetah-grid

特定セルの文字色/背景色を変更する

fujita1106 opened this issue · 7 comments

Hi
イベントで取得した値を基に特定セルの背景色や文字色を変更したいです。
文字色/背景色をセル単位で指定する方法をご教授頂きたくお願い致します。

Thanks

こんにちは @fujita1106.
「イベントで取得した値」とはなんでしょうか?可能であればサンプルコードを提供していただけますか?

Hi @fujita1106.
What does "イベントで取得した値"(value obtained at the event) mean? Would you please provide sample code?

listenを使用してセルクリック時に値を取得・代入しています。
値の内容を基にセルの色を変えたいです。
grid.listen(CLICK_CELL, (...args) => listener(args));
const listener = (args) => {
const records = grid.records;
if(records[row]["field"] == "")
{
records[row]["field"] = "value";
//row,fieldで指定したセルの背景色を変更したい。
}
};

thanks

Thank you for provide a sample code.

You can change the style (color etc.) for each record by specifying a function in the style property of the column definition.
I think you can check for changes in the fields of record and use it to change the color for each cell.

See https://future-architect.github.io/cheetah-grid/documents/api/js/column_styles.html#advanced-column-style

カラム定義のstyleプロパティに関数を指定する事でレコードごとにスタイル(色など)を変更することができます。
レコードのフィールドの変更をチェックし、styleプロパティに関数を指定する事でセルごとに色を変えることができると思います。

Thank you for your response.
以下コードで試してみたのですが列の背景色が変わりません
grid.layout.body[0][col].style = {
textAlign:"center",
bgColor: "green"
};
grid.invalidate();
styleプロパティ上は背景色が定義されていそうなのですが...
image

Sorry to ask such a elementary question.

You use the function.

Oh it's not. You need to specify it when defining the column. It cannot be rewritten later using the property.

I got it!
Thanks to you I was able to understand that.