ユーザーインターフェースのカスタマイズ

Wijmo では、ウィジェットの各要素の外観を、必要に応じて簡単にカスタマイズできます。たとえば、wijgrid のヘッダ行をカスタマイズするには、基本的な HTML スタイル属性の設定により、デフォルトの CSS クラスである wijmo-wijgrid-headerrow を次のように再定義します。

タイトルの設定例	コードのコピー
<style type="text/css"> /* Column header */ wijmo-wijgrid .wijmo-wijgrid-headerrow>th{ color: blue !important; background: lightblue !important; height: 50px; font: bold 14pt sans-serif !important; text-align: left; } </style>

タイトルの設定例

コードのコピー

<style type="text/css">
/* Column header */
wijmo-wijgrid .wijmo-wijgrid-headerrow>th{
    color: blue !important;
    background: lightblue !important;
    height: 50px;
    font: bold 14pt sans-serif !important;
    text-align: left;
}
</style>

これにより、wijgrid の列の外観は、次の右側の図のようになります。

同様に、さまざまな要素に定義されたデフォルトの CSS クラスをカスタマイズすることで、ヘッダセルやグリッドセルの背景色、文字揃え、罫線などを簡単にカスタマイズできます。

次の表は、wijgrid ウィジェットの UI 要素に使用される主な CSS クラスの一覧を示します。

UI 要素	CSS クラス
共通
行	wijmo-wijgrid-row
データ行	wijmo-wijgrid-datarow
ヘッダ行	wijmo-wijgrid-headerrow
ヘッダ行	wijmo-wijgrid-headerrow
フッタ行	wijmo-wijgrid-footerrow
強調表示する行	wijmo-wijgrid-row.ui-state-hover
1 行おきの行	wijmo-wijgrid-alternatingrow
行ヘッダ	wijmo-wijgrid-rowheader
フィルタリング
フィルタ行	wijmo-wijgrid-filterrow
フィルタセル	wijmo-wijgrid-filter
フィルタ入力	wijmo-wijgrid-filter-input
並べ替え
並べ替えアイコン	wijmo-wijgrid-sort-icon
グループ化
グループヘッダ	wijmo-wijgrid-groupheaderrow
グループの展開/折りたたみボタン	wijmo-wijgrid-grouptogglebtn
グループボタン	wijmo-wijgrid-group-button
グループフッタ	wijmo-wijgrid-groupfooterrow
現在のセル
現在の行ヘッダセル	wijmo-wijgrid-current-rowheadercell
現在のヘッダセル	wijmo-wijgrid-current-headercell
現在のセル	wijmo-wijgrid-current-cell
選択
選択されたセル	ui-state-highlight