web-dev-qa-db-ja.com

jqGrid GridUnload / GridDestroy

$('#mygrid').jqGrid('GridUnload');を使用すると、グリッドが破棄されます。ページャーもヘッダーもありません。

ウィキで私が見つけた：

前の方法との唯一の違いは、グリッドが破棄されることですが、テーブル要素とページャー（存在する場合）は再び使用できる状態のままです。

GridUnload/GridDestroyの違いが見つからないか、何か問題がありますか？

jqGrid 3.8を使用します。

javascriptjqgrid
24
Scharlotte

ページにjqGridを作成できるようにするには、グリッドを表示するページの場所に空の_<table>_要素を挿入する必要があります。テーブル要素の最も単純な例は_<table id="mygrid"></table>_です。

空の_<table>_要素自体は、$('#mygrid').jqGrid({...})および列のようなグリッド要素を呼び出すまで、ページ上で見えないヘッダーが作成されます。

メソッドGridDestroyは、 jQuery.remove のように機能します。 グリッドに属するすべての要素を削除しますinclusve_<table>_要素。

一方、メソッドGridUnloadはすべて削除しますが、empty _<table>_要素はページに残ります。したがって、同じ場所に新しいグリッドを作成できます。メソッドGridUnloadは、異なるグリッドが異なる条件に依存する1つの場所に作成する必要がある場合に非常に便利です。 古い答え と デモ を見てください。デモでは、同じ場所に2つの異なるグリッドを動的に作成する方法を示しています。コード内のGridUnloadをGridDestroyに置き換えるだけの場合、デモは機能しません。最初のグリッドを破壊した後、同じ場所に他のグリッドは作成されません。

58
Oleg

Olegの答えに加えて、GridUnloadがテーブルからグリッドを削除するだけのことをもう少し行うことを指摘したいと思います。元のHTMLテーブル要素（およびページャー）を削除し、その場所に同じ要素を広告します（少なくとも4.5.4ではそうです）。

これは、いくつかのイベントハンドラーをテーブルHTML要素にアタッチした場合（つまり、jquery on（（#gridID '）。on（' event '、' selector '、handler）など）も削除されることを意味します。その結果、古いグリッドを新しいグリッドに置き換えると、イベントは新しいグリッドで発生しません...

7
Fazi

Olegの答えは、グループヘッダーがない限り問題なく機能します。

'setGroupHeaders'でグループヘッダー行を追加する場合

'GridUnload'に続いて$（ '＃mygrid'）。jqGrid（{.. 。}）は一貫していません。

Chromeでは正常に動作しますが、IE11では動作しません。

IE11では、各 'jqg-third-row-header'アイテムは異なる行（斜め）にレンダリングされます。

デバッグにはfree-jqGrid：query.jqgrid.src.jsバージョン4.13.4を使用しています。このファイルでは、行9936で始まるコードまで問題を追跡しました。

if (o.useColSpanStyle) {
    // Increase the height of resizing span of visible headers
    $htable.find("span.ui-jqgrid-resize").each(function () {
        var $parent = $(this).parent();
        if ($parent.is(":visible")) {
            this.style.cssText = "height:" + $parent.height() + "px !important; cursor:col-resize;";
            //this.style.cssText = "height:" + $parent.css('line-height'); + "px !important;cursor:col-resize;";
        }
    });
    // Set position of the sortable div (the main lable)
    // with the column header text to the middle of the cell.
    // One should not do this for hidden headers.
    $htable.find(".ui-th-column>div").each(function () {
        var $ts = $(this), $parent = $ts.parent();
        if ($parent.is(":visible") && $parent.is(":has(span.ui-jqgrid-resize)") && !($ts.hasClass("ui-jqgrid-rotate") || $ts.hasClass("ui-jqgrid-rotateOldIE"))) {
            // !!! it seems be wrong now
            $ts.css("top", ($parent.height() - $ts.outerHeight(true)) / 2 + "px");
            // $ts.css("top", ($parent.css('line-height') - $ts.css('line-height')) / 2 + "px");
        }
     });
}
$(ts).triggerHandler("jqGridAfterSetGroupHeaders");
});

このコードは、各 'jqg-third-row-header'アイテムに関連する高さとトップのcss値を設定します。これにより、「jqg-third-row-header」の縦長で斜めのレイアウトになります
潜在的なバグ：。

上記の$ parent.height（）および$ ts.height（）メソッドは、IE11で以前のjqGridテーブルの高さを返します。 In Chrome計算された 'th'の高さを返します（top = 0）。line-heightを使用する2つのコメント行を追加してテストしました。 JqG​​ridサイズ変更ロジックを完全に理解していないため、これは修正されない場合があります。
代替ソリューション：

指定する場合。

 colModel: 
     {
     label: 'D',
     name: 'W',
     width: 6,
     align: 'center',
     resizable:false  //required for IE11 multiple calls to this init()
     },

Resizableがfalseの場合、上記のコードは検出されず、高さと上部は設定されません。
OlegのjqGridは非常に優れたコントロールです。おそらく、彼はIE11でgroupheaderを使用してデモグリッドをテストできます。

1
jiminka