0

jqGrid があり、デフォルトの背景画像が付属しています。その背景画像を変更したいと考えています。オンラインで提案されているように、いくつかの方法を試しました

方法 1. CSS に以下のコードを追加しました

.ui-jqgrid .ui-widget-header
{
    background-image:url(images/my-header.png) repeat-x !important;
}

METHOD 2.jqGridの完了イベントをロードするコードの下に追加

loadComplete: function () {
    $("#gview_jqgCUST .ui-jqgrid-titlebar").removeClass('ui-widget-header');
    $("#gview_jqgCUST .ui-jqgrid-titlebar").addClass('jqgrid-header');
}

私が追加したCSSで

.jqgrid-header{
    background:red url(images/my-header.png) repeat-x scroll 50% 50%;
    border:1px solid black;
    color:Blue;
    font-weight:bold;
}

jqGrid cssファイルの後にcssファイルをロードしていますが、それを達成できませんでした

どうすればできますか?? サンプルコードをお願いします...私はjqGridとjQueryが初めてです..

4

1 に答える 1

3

まず、 jQuery UI のThemeRollerを使用して、ページで使用するテーマをカスタマイズできます。「CSS Scope」を使用すると、ページの一部にのみテーマを適用することを減らすことができます (回答を参照)。

backgroundまたは、 ofを指定することもできます.ui-jqgrid .ui-widget-header。デモでは、 "Dot Luv" テーマの背景を使用しています。ヘッダーの見栄えbackgroundを良くするために、テキストと境界線の色を指定しました。CSSを使用しました

.ui-jqgrid .ui-widget-header {
    border: 1px solid #0b3e6f;
    background: #0b3e6f url(http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/images//ui-bg_diagonals-thick_15_0b3e6f_40x40.png) 50% 50% repeat-x;
    color: #f6f6f6;
}

結果のグリッドは下の図のようになります

ここに画像の説明を入力

于 2013-06-27T06:44:17.650 に答える