Skip to main content

セルの背景色

問題点​

セルの背景色を設定するときの悩み

  • background-color を設定すると、選択中セルの背景色が反映されない
  • 選択中セルの背景色が反映されないのに文字色だけ反転される (ので見えなくなる)

↓

いろいろ試して、若干せこい対策だが、background-image に半透明 image を使うことで回避が良さそう

対策1. セル選択時に文字色を変えない​

css
.wj-state-selected,
.wj-state-multi-selected {
	color: inherit !important;
}

対策2. 背景色は backround-color を使わず、background-image を使用する​

css
.cell-ok {
	background-image: repeating-linear-gradient(#e6f4eadd) !important;
}
.cell-default {
	background-image: repeating-linear-gradient(#ffffffdd) !important;
}

対策3. code, pre の背景透過​

css
.wj-cell pre,
.wj-cell code {
    background-color: transparent;
}

コードでのスタイル設定箇所​

tsx
initialized={(grid) => {
    grid.formatItem.addHandler((s, e) => {
        if (e.panel === s.cells) {
            const row = s.rows[e.row];
            const col = s.columns[e.col];
            const item = row.dataItem;
            const binding = col.binding;

            if (item && binding && typeof item[binding] === 'string') {
                const value = item[binding];

                if (value === 'OK') {
                    e.cell.classList.add('cell-ok');  // ← ★ ここでスタイル設定
                } else if (value === 'NG') {
                    e.cell.classList.add('cell-ng');
                } else if (value == '-') {
                    e.cell.classList.add('cell-disabled');
                } else {
                    e.cell.classList.add('cell-default');
                }
            }
        }
    }
}}
Last updated on