20

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

4

7 に答える 7

19

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

これは私のコードです

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

「ui-jqgrid-titlebar」クラスを指定して、親divを選択し、ヘッダー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;
  }

私はこれをテストして動作しました。これがお役に立てば幸いです...

于 2010-02-10T17:03:37.713 に答える
3

私はあなたができると確信しています。

次の 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");

両方のテクニックを使用することをお勧めします。

于 2009-09-12T16:53:30.863 に答える
3

Justin Ethierの発言を詳しく説明すると...

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

事後にcssを変更する前に、それがうまくいくかどうかを確認することを強くお勧めします...ただし、jquery-uiテーマの外観が制限されすぎている場合は、それを行うこともできます.

于 2009-09-21T19:27:21.867 に答える
1 
/* 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");
}
于 2012-03-05T22:38:56.900 に答える
0

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

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

グリッド サイズが大きい場合、パフォーマンスの問題が発生する可能性があります。

于 2014-01-01T15:55:55.273 に答える