jqgrid - jqgrid. テーマを変更

Question

スタイルシートを変更せずに jqgrid の外観を変更するにはどうすればよいですか? 基本的に jqueryui を使用してサイトのスタイルを設定していますが、グリッドだけに異なる背景画像を使用したいと考えています。これは可能ですか？

Answer 1

複数の jQueryUI テーマを同じページに適用し、jqgrid でそのうちの 1 つを使用し、ページ内の他の要素で別のテーマを使用したいということですか?

スコープを追加する方法について説明しているこのページを見たいと思うかもしれません(簡単な方法は、ページの残りの部分で手動でスコープされたテーマを使用し、jqgrid で「デフォルト」スコープを使用することだと思います。 jqgrid jquery 拡張コードを調べて、カスタム スコープの使用方法を確認してください)。

Answer 2

私はこれを行っていませんが、私が使用する戦略は、jQuery UIが使用するのと同じ基本的なCSS定義レイアウトを維持しながら、グリッドのいくつかの代替スタイルを定義することですが、スタイルコンテンツを希望どおりに再定義します。これらのスタイルがjQueryUIスタイルシートの後に含まれていることを確認します。次に、ドキュメントの読み込み時にjavascriptを使用して、スタイルに一致するjQueryUIクラスを持つjqGridの要素に新しいCSSクラスを適用します。

授業が多いので大変な苦痛だと思いますし、テーマを持っているという目的をやや損なうので、やろうとは思いません。

.jqgrid-widget { ... override widget styles ... }
.jqgrid-widget input, .jqgrid-widget select ...
.jqgrid-widget-content { ... override widget-content styles ... }


 $(function() {
     $('#myGrid .ui-widget').addClass('jqgrid-widget');
     $('#myGrid .ui-widget-content').addClass('jqgrid-widget-content');
     ...
 });

Answer 3

この関数は、すべて（少なくともほとんどすべて）のjqueryuicandyを削除します

/* Remove jquery-ui styles from jqgrid */
    function removeJqgridUiStyles(){
        $(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
        $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
        $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
        $(".ui-jqgrid-pager").removeClass("ui-state-default");
    }