web-dev-qa-db-ja.com

jqGridのスタイルを変更する

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

javascriptjquerycssjqgrid
20
Arka Chatterjee

JqGrid 3.5の大きな機能の1つは、jQuery UIテーマとの統合です。 here からテーマを構築および/または選択できます。次に、ページに参​​照を追加します。

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

これにより、最小限の労力で非常に見栄えの良いグリッドが得られます。

これで問題は解決しますか、それともグリッドのルックアンドフィールをさらにオーバーホールする必要がありますか？

32
Justin Ethier

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

これは私のコードです

HTML：

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

jqGrid：

    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}
              );

どのオブジェクトで作業する必要があるのか​​を理解するために、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を選択し、ヘッダーdivを「検索」して、「ui-jqgrid-titlebar」クラスを指定する必要がありました。次に、元の「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;
  }

私はこれをテストし、動作します。これが役立つことを願っています...

19
MosLeBrut

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

次の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が生成されます。

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">

..

</div>

すべてのCSSクラスを削除します。

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

等.

独自のクラスを作成したら、次を使用してHTML構造に追加できます。

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

両方の手法を使用することをお勧めします。

3
Zoltan Veres

ジャスティン・エティエが言うことを詳しく述べるために...

JqGridはJquery-UIテーマを使用するため、グリッドの外観を変更する最良の方法は、カスタム テーマ を作成することです。

Jquery-uiテーマの外観があまりにも制限されている場合は、実際にcssを変更しようとする前に、それが機能するかどうかを確認することを強くお勧めします。

3
r00fus

JQGridのcssを新しい方法で変更しました。これは、ブートストラップデザインもサポートします。このjQGridを設定するには、次のものが必要です

1）Font Awesome Style

2）jQGrid最新バンドル

新しいデザインのjQGridは次の画像のようになります

jQGrid New Design

新しい完全なCSSと完全なJavaScriptコーディングが含まれています http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html こちら。

1
Biby Augustine
/* 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");
}
1
niko.makela

すべてのui-gridクラスを削除できます。

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

グリッドサイズが大きい場合、これにはパフォーマンスの問題があります。

0
Alireza Fattahi