データテーブルのソートされている列の色を変更する方法

Owned by Site_admin_1
9月 21, 2023

Q.

SkyVisualEditorの検索画面などで検索結果を表示するデータテーブルで、ソートキーとして選択されている列のヘッダーの背景色を変更することはできますか？

A. 

はい、可能です。
SkyVisualEditorでスタイルクラスを記述することでソートされている列に背景色をつけることができます。
以下は、ソートされている列に背景色を設定した画面イメージです。

以下で設定手順を紹介します。
なお、スタイルクラスに関してはSkyVisualEditorの標準サポートの対象外です。また、当対応が今後のバージョンアップで永続的に動作することを保証するものではありません。
あらかじめ、ご了承ください。

 

  1. ソート列に背景色を設定したいページに、スタイルクラスを記述
    SkyVisualEditor Studioでソート列に背景色を設定したいページを開き、Studio右側のページプロパティ内の[ページスタイル編集]ボタンを押下します。


    ページスタイルエディタが表示されますので、以下のコードを記述し、[OK]をクリックします。

    .headerSortDown{
background:#000000/*背景色として設定したいカラーコードを設定してください*/ !important;
}
.headerSortUp{
background:#000000/*背景色として設定したいカラーコードを設定してください*/ !important;
}

     

    以下は、背景色を#FF69B4（ピンク色）と設定した際のコードです。
    カラーコードについては、こちらのリンクなどをご参考にしてください。



  2. デプロイ