1

無料の jqgrid トップ ツールバーには多くのボタンが含まれており、最後のページ ボタンのない要素とページャーを選択します。ボタンは複数の行に折り返されます。を使用して中央部分を除去

#grid_toppager_center {
    width: 0;
}

ページャーは右側の領域にあるため、ページャーの下と後に未使用の空きスペースがたくさんあります。

空きスペース

を使用して空きスペースを削除しようとしました

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

と

    pagerpos: 'left',

この場合、ツールバー ボタンの上にページャーが表示されます。

上

トップツールバーの最後など、ページャーを他の場所に配置するにはどうすればよいですか?

jqgrid 設定:

$.extend($.jgrid.defaults, {
    iconSet: "fontAwesome" ,
    autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 },
    toppager: true,
    viewrecords: false,
    pagerpos: 'left',
    rowList: [50, 500, 1000],
    rowNum: 50,

スタイル：

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

.ui-pg-button-text {
    margin: 4px !important;
}

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    margin: 0 5px;
    font-size: 20px;
}

.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active {
    margin: 1px;
    font-weight: normal;
}

アップデート

からデモしてみました

http://www.ok-soft-gmbh.com/jqGrid/OK/tougleButton1_iconOver2.htm

jqgrid の幅を減らしました。

空のスペースがまだ表示されます:

空の

この領域にボタンを配置して、グリッド幅全体を使用し、必要な数の行を折り返すにはどうすればよいですか? ボタンの後、ページャーを配置する必要があります。

できる限り少ない行を占めるコンパクトなツールバーが望ましいです (このサンプルでは最後の 2 つのボタンが削除されています)。

希望2

4

1 に答える 1

2

要件を実装する最も簡単な方法は、次のように思えます。

最初に、ページャーの不要な要素の作成を使用法によって削除しますpgbuttons: false, pginput: false, rowList: [], viewrecords: false(最後の 2 つのオプションrowList: [],viewrecords: falseは既にデフォルトになっています)。

無料の jqGrid 4.8 のページャーは、1 つの行と 3 つのセル (左、中央、右) を持つテーブルで構成されています。したがって、ページャ全体の左部分を作成するには、次を使用できます。

$("#grid_toppager_center").hide();
$("#grid_toppager_right").hide();
$("#grid_toppager_left").attr("colspan", "3");

デモで確認できる結果: ここに画像の説明を入力

一般に、ページャーをそのまま使用して、ページャーの右側の部分だけを非表示にすることができます。使える場合

$("#grid_toppager_right").hide();
$("#grid_toppager_left").attr("colspan", "2");

例えば。表示される次のデモを参照してください。

ここに画像の説明を入力

do the demo のように不要な要素を削除することで、ページャーを減らすことができます。

ここに画像の説明を入力

UPDATED : あなたの問題の解決策は、あなたが持っている正確な要件によって異なります。ページャーとナビゲーター バーで発生する主な問題をお見せしたいと思います。他のすべての調整は、必要に応じて簡単に行うことができます。

たとえば、次のデモでは、ページャー テーブルをナビゲーター バー内に移動します。結果は下の写真のようになります

ここに画像の説明を入力

追加のカスタマイズが必要な場合は、自分で行う必要があります。最後のデモでは、コードを使用します

$("#grid_toppager_left").hide();
$("#grid_toppager_right").hide();
$("#grid_toppager_center").attr("colspan", "2");
$("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""});
$("#grid_toppager_center").find(">.navtable").append(
    $("#grid_toppager_center").find(">table.ui-pg-table")
);
$("#grid_toppager_center").find(">.navtable").children().each(function() {
    $(this).css("float", "left");
});
$grid.bind("jqGridAfterGridComplete", function () {
    var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
    $toppager.find(".navtable").css("width", "");
});
于 2015-03-14T10:55:14.353 に答える