作成日: 2015/05/25 最終更新日: 2015/05/25
文書種別
使用方法
詳細
GridViewにおいてC1Bandを使用した複数行ヘッダーの背景色を変更するには下記のようにCSSにてスタイルを指定します。
◎サンプルコード (CSS)
この場合、複数行ヘッダーの全てのヘッダーセルの背景色が変更されます。
個別のヘッダーセルの背景色を変更する場合は下記コードのように、JavaScriptにて個別のヘッダーセルに対してCSSを設定します。
◎サンプルコード (JavaScriptで個別に設定する方法（スクロールなし）)
スクロールを有効（ScrollingSettingsのModeプロパティをAutoにした場合など）とした場合は、下記コードのようにヘッダへのセレクタが"<GridのID>_div"となります。
◎サンプルコード (JavaScriptで個別に設定する方法（スクロールあり）)
◎サンプルコード (CSS)
/* スタイルシートで一括設定する方法 */
.wijgridth {
background: red !important;
}
.wijgridth {
background: red !important;
}
この場合、複数行ヘッダーの全てのヘッダーセルの背景色が変更されます。
個別のヘッダーセルの背景色を変更する場合は下記コードのように、JavaScriptにて個別のヘッダーセルに対してCSSを設定します。
◎サンプルコード (JavaScriptで個別に設定する方法（スクロールなし）)
// ヘッダの取得
var grid1_thead = $("#C1GridView1").find("thead");
// 複数行ヘッダの1行目を取得
var grid1_band1 = grid1_thead.find("tr").eq(0);
// 複数行ヘッダの2行目を取得
var grid1_band2 = grid1_thead.find("tr").eq(1);
// 1行目の3つ目のセルヘッダーの背景色を設定します
grid1_band1.find("th").eq(2).css({
background: 'blue !important'
});
// 2行目の1つ目のセルヘッダーの背景色を設定します
grid1_band2.find("th").eq(0).css({
background: 'green !important'
});
var grid1_thead = $("#C1GridView1").find("thead");
// 複数行ヘッダの1行目を取得
var grid1_band1 = grid1_thead.find("tr").eq(0);
// 複数行ヘッダの2行目を取得
var grid1_band2 = grid1_thead.find("tr").eq(1);
// 1行目の3つ目のセルヘッダーの背景色を設定します
grid1_band1.find("th").eq(2).css({
background: 'blue !important'
});
// 2行目の1つ目のセルヘッダーの背景色を設定します
grid1_band2.find("th").eq(0).css({
background: 'green !important'
});
スクロールを有効（ScrollingSettingsのModeプロパティをAutoにした場合など）とした場合は、下記コードのようにヘッダへのセレクタが"<GridのID>_div"となります。
◎サンプルコード (JavaScriptで個別に設定する方法（スクロールあり）)
// ヘッダの取得
var grid2_thead = $("#C1GridView1_div").find("thead");
：
var grid2_thead = $("#C1GridView1_div").find("thead");
：
旧文書番号
81322