jqGridのスタイルを変更

Question

私はjqGrid 3.5を使用しています。 jQueryやカスタムCSSなどを使用して、グリッドのスタイルと外観を変更して、より美しいものにすることはできますか？

Answer 1

私はできると確信しています。

2つのオプションがあります。

グリッドのCSSを変更できます。 これは、デザインを少し修正する必要がある場合に便利です。 JQGridのCSSクラスは実際には互いに依存しているので、このような変更は行わないでください。

また、HTMLからすべてのスタイリングを削除し、自分のスタイリングと置き換えることもできます。例えば

あなたのようJQGridを持っている：

HTML

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager2" class="scroll" style="text-align:center;"></div> 

jQueryの

jQuery("#list2").jqGrid({ url:'server.php?q=2', 
datatype: "json", 
colNames:['Inv No','Date'], 
colModel:[ {name:'id',index:'id', width:55},{name:'invdate',index:'invdate',width:90}], 
rowNum:10, 
rowList:[10,20,30], 
pager: jQuery('#pager2'), 
sortname: 'id', 
viewrecords: true, 
caption:"JSON Example" }).navGrid('#pager2',{edit:false,add:false,del:false}); 

これについては、以下のようなHTMLが生成されます。

を回の

削除し、すべてのCSSクラス：

JQuery("#list2").removeClass(".ui-jqgrid-titlebar"); 

など

あなたはあなたがHTML構造に追加することができ、独自のクラスを作成した後：私は両方を使用することをお勧め

JQuery("#list2").addClass(".YourClass"); 

技術。

Answer 2

jqGrid 3.5の大きな特徴の1つは、jQuery UIテーマとの統合です。あなたはhereからテーマを作成したり選択したりすることができます。次に、あなたのページに参​​照を追加してください：

<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/> 

これは、最小限の労力で、非常によく見えるグリッドを得ることができます。

これは問題を解決するか、グリッドのルック・アンド・フィールをさらに詳しく見直す必要がありますか？ jqGridはjQueryの-UIのテーマを使用しているため、グリッドの外観を変更するための最良の方法は、カスタムthemeを作ることであろう...ジャスティンエティエが言うに

を詳しく説明し

Answer 3

。

jquery-uiのテーマの見た目があなたのために限定されている場合は、事実の後でCSSを修正する前に、それがうまくいくかどうかを確認することを強くお勧めします。

Answer 4

グリッドヘッダー（オンザフライ）を変更する必要があります。

これは

HTML私のコードです：さんが点検しましょう、私は仕事に持っているオブジェクトを理解するために

jQuery("#jqgrid_ctrs").jqGrid({ 
     url:'php-modules/controllers_data.php?ctrtype=LED', 
     datatype: "json", 
     width:500, 
     height:"auto", 
     colNames:['CtrName','Type', 'Description', 'Location'], 
     colModel:[ 
      {name:'CtrName',index:'CTRNAME', width:70, editable:false}, 
      {name:'Type',index:'CTRTYPE', width:70, editable:false}, 
      {name:'Description',index:'CTRDESCR', width:250, editable:false}, 
      {name:'Location',index:'CTRLOCATION', width:70, editable:false} 
     ], 
     rowNum:10, 
     rowList:[10,20,30], 
     pager: jQuery('#jqgrid_ctrs_pager'), 
     sortname: 'CtrName', 
     viewrecords: true, 
     sortorder: 'desc', 
     caption:'System Controllers', 

    }).navGrid('#jqgrid_ctrs_pager', 
       {search:true,edit:false,add:false,del:false} 
      ); 

：

<table id="jqgrid_ctrs" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="jqgrid_ctrs_pager" class="scroll" style="text-align:center;"></div> 

jqGrid JavaScriptコードによって生成されたHTMLコード：

<div id="gview_jqgrid_ctrs" class="ui-jqgrid-view" style="width: 760px;"> 
    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div> 
    <div class="ui-state-default ui-jqgrid-hdiv" style="width: 760px;"> 

...今

、指定されたIDを持つ唯一のdivが<のdivのid = "gview_jqgrid_ctrs" です...

以下が動作しない理由ですこと。

jQuery("#jqgrid_ctrs").removeClass('.ui-widget-header'); 
jQuery("#jqgrid_ctrs").addClass('.jqgrid-header'); 

私は親divを選択し、 "ui-jqgrid-titlebar"クラスが指定されたヘッダーdivを "検索"しなければなりませんでした。その後、元の "ui-widget-header"クラスを削除し、自分のクラスに置き換えました。

$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").removeClass('ui-widget-header'); 
$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").addClass('jqgrid-header'); 

ここで、.jqgrid-headerは、この方法で定義されたスタイルです。

.jqgrid-header { 
    background:#FF9C00 url(images/new_header_bck.png) repeat-x scroll 50% 50%; 
    border:1px solid #4297D7; 
    color:#FF0000; 
    font-weight:bold; 
    } 

これをテストして動作します。あなたはすべてのUIグリッドクラスを削除することができます

Answer 5

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

Answer 6

...これが役立つことを願っています：

$("[class^='ui-jqgrid']").removeAttr('class'); 

あなたのグリッドサイズが大きい場合、これはパフォーマンスの問題を有することができます。

Answer 7

私は新しい方法でjQGridのCSSを修正しました。これはbootastrapデザインもサポートします。あなたは新しいがjQGridが新しいフルCSS

画像以下のようになりますように設計このjQGrid

に

1を構成するには、以下のもの）フォント素晴らしいスタイル

2）jQGrid最新のバンドル

が必要完全なjavascriptsコーディングはhttp://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.htmlに含まれています。