jqgrid。テーマを変更する

Question

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

Answer 1

それはあなたが同じページに複数のjQueryUIテーマを適用すると、ページ内の他の要素他を使用した一方で、それらのいずれかを使用jqgrid持つようにしたいということですか？

このpage which discusses how to add scopeを見ることができます（残りのページに手作業でスコープされたテーマを使用させ、jqgridに "デフォルト"スコープを使用させるのが簡単な方法だと仮定しています）カスタムスコープを使用する方法を参照するにはjqgrid jqueryの延長コード）

Answer 2

私はこれをやっていませんが、私が使用する戦略は、jQuery UIが使用するのと同じ基本的なCSS定義レイアウトを維持しながら、スタイルコンテンツを必要な方法で再定義することですそれ。これらのスタイルがjQuery UIスタイルシートの後に含まれていることを確認したいと思います。次に、ドキュメントの読み込み時にjavascriptを使用して、スタイルに合ったjQuery UIクラスを持つ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

この機能は、すべての（少なくともほとんどすべて）jqueryのUIキャンディ

/* 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"); 
    } 

を削除します