9

多くの場所で jQgrid を使用するアプリケーションの作成を開始しました。現在、顧客はTwitter Bootstrapを使用して、iPad でサイトを適切に表示できるようにしたいと考えています。

jQGrid プラグインを除いて、ほぼすべての作業を完了しました。px widthグリッドの幅を定義するために と を使用しcolumn widthます。

jQuery("#list2").jqGrid({
    url:'server.php?q=2',
    datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},      
        {name:'total',index:'total', width:80,align:"right"},       
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

jQGridでこのレスポンシブの問題に対処する方法についてはわかりません。あるいは、応答性のために jQGrid をDataTable Plugin に置き換えることもできます。しかし、私たちは多くの場所で jQgrid を使用しており、非常にうまく機能しています。既存の機能を壊したくありません。

応答性/流動的なレイアウトのサポートとして jQgrid を使用するためのアイデア/提案はありますか?

4

8 に答える 8

5

この方法を使用してグリッドを流動的にする方法については、この回答を参照することをお勧めしsetGridWidthます。さらに、次のグリッドオプションを確認する必要があります。

  • 自動幅

true に設定すると、グリッド幅は親要素の幅に自動的に再計算されます。これは、グリッドが作成されたときの最初にのみ行われます。親要素の幅が変更されたときにグリッドのサイズを変更するには、カスタム コードを適用し、この目的のために setGridWidth メソッドを使用する必要があります。

  • 縮小して合わせる

このオプションが設定されている場合、グリッドの幅を考慮して、グリッドの列の幅を再計算する方法を定義します。この値が true で、列の幅も設定されている場合、すべての列はその幅に比例してスケーリングされます。

このshrinkToFitオプションはデフォルトで設定されていますが、明示的に設定する必要がありますautowidth。

それは役に立ちますか？

于 2013-08-13T13:49:28.760 に答える
3

このコードを追加できます：

jQuery("#grid").jqGrid({
......
 beforeRequest: function() {
                    responsive_jqgrid($("#divWhereYourgridIsDisplayed"));
                },
.......
});

この後、次を追加する必要があります。

 function responsive_jqgrid(jqgrid) {
                jqgrid.find('.ui-jqgrid').addClass('clear-margin span12').css('width', '');
                jqgrid.find('.ui-jqgrid-view').addClass('clear-margin span12').css('width', '');
                jqgrid.find('.ui-jqgrid-view > div').eq(1).addClass('clear-margin span12').css('width', '').css('min-height', '0');
                jqgrid.find('.ui-jqgrid-view > div').eq(2).addClass('clear-margin span12').css('width', '').css('min-height', '0');
                jqgrid.find('.ui-jqgrid-sdiv').addClass('clear-margin span12').css('width', '');
                jqgrid.find('.ui-jqgrid-pager').addClass('clear-margin span12').css('width', '');
            }

これがうまくいくことを願っています:)

于 2014-09-25T11:00:11.573 に答える
0

はい、非常に簡単な方法でレスポンシブにすることができます。

CSS を開いて%で幅を指定するだけです。

例：

ui-grid{ width:100% !important; }

次に、それに応じてテーブル本体を変更します。

于 2014-02-03T08:41:58.613 に答える
0

これは、ブートストラップレスポンシブでうまく機能します

jQuery("#your-list-id").setGridWidth($('.your-reference-element').width()-10, true);

「your-reference-element」幅を使用してグリッドのサイズを変更します

于 2014-10-29T17:06:02.263 に答える
-1

jqGrid 5.0 の新しいバージョンには、Bootstrap のネイティブ サポートがあります。

バージョン 5.0 の時点で、Guriddo jqGrid は任意の CSS フレームワークに簡単に適応させることができます。Bootstrap ポートを開発しました。この機能を使用するには、適切な CSS を含めるだけで済みます

<link rel="stylesheet" type="text/css" media="screen" href="path_to_css_files/ui.jqgrid-bootstrap.css" />

ファイルを作成し、jqGrid に Bootstrap を使用するように指示します。次のオプションを使用します。

$("#grid").jqGrid( {
    ...
    styleUI : "Bootstrap",
    ...
 });

列の選択とマウスによるグリッドのサイズ変更を除き、jqGrid の既存の機能をすべてサポートしています。

デモ

ソース

于 2015-12-15T15:22:23.670 に答える