プリザンターのテーブルのセルに斜線を引く方法

はじめに

サーバスクリプトと自動ポストバックなどを駆使して項目の表示・非表示をおこなっている場合でも、一覧画面ではセルはそのまま表示されてしまいます。一覧画面で見たときに未入力なのか、それとも非表示(≒入力しなくて良い)セルなのかの判断がつかないためユーザビリティがあまりよくありません。
今回は、Excelチックに斜線を表示させることで、ユーザビリティを少し改善してみます。

実装してみる

対象のセルがリンクなどで他のサイトで表示されるかどうかが、キーポイントになります。このようなスタイルを当て込む方法は通常ではサイトのスタイル設定を使用して実装しますが、これは他のサイトでは呼び出すことが出来ません。他のサイトでも呼び出す必要がある時は拡張スタイルを使います。
拡張スタイルを使うことで、使用しているプリザンター全体に対して使い回しが出来るというメリットがあるのですが、Pleasanter.net環境などではセキュリティの観点から使えないなどのデメリットもあります。拡張スタイルが使用出来ないときはリンク先のサイトのスタイルにも同じ物を用意するなど少し手当が必要になります。

用意したCSSはこれです。

.cell-slash {
    background-image: linear-gradient(to top right, transparent calc(50% - 1px), rgb(34, 34, 34), transparent calc(50% + 1px));
}

使用されている環境に合わせてサイトのスタイルや拡張スタイルに追加してみてください。
これを項目のセルCSSに設定すれば斜線が表示されます！

...で終われば簡単なのですが、もう手間加える必要があります。

プリザンターでは説明項目や添付ファイル項目などで表示スタイルの都合上、内部にタグが入れ子になっている項目があります。それらの項目に対して背景色が設定されている場合があり、せっかく設定した罫線の上に要素がかぶってしまい見えなくなってしまうことがあります。それを防ぐためにサーバスクリプトを使用して、入れ子になっている要素を消してしまいます。

//条件は行表示の前
columns.DescriptionA.RawText = '';
columns.DescriptionA.ExtendedCellCss = 'cell-slash';

これを分類項目に対して適用してみるとこのように表示されます。いい感じですね。

まとめ

今回はセルに斜線を表示させる方法を紹介しました。RawTextを使うことでセル内のHTML要素を直接触ることができるため、今回の様に要素を消したいというニーズにも柔軟に対応することが出来ました。皆さんも是非試してみてください。