2 
$("#tableVisualization").jqGrid('GridUnload');

$("#tableVisualization").jqGrid({
    datatype: "local",
    mtype: 'GET', 
    colNames: this.GetGridColumnNames(),
    colModel: this.GetGridColumnModel(),
    height: "100%", 
    autowidth: true,
    shrinkToFit: true,
    sortname: 'monthID', 
    sortorder: "desc", 
    rowList: [6, 12], 
    rowNum: 12,
    pager: $('#pager3'), 
    viewrecords: true, 
    recordpos: "left", 
    caption: "Table" 
});

//local data array used for example
var data = this.GetGridData();

//FUNCTION CALL
//populate grid with data
$("#tableVisualization").jqGrid("addRowData", "month", data);

$("#tableVisualization").trigger("reloadGrid"); 

$("#tableVisualization").setGridWidth(1040, true);

上記のコードは正常に動作します。

ただし、変数に割り当て$("#tableVisualization")て上記のコードで変数を使用すると、機能しません。

//var grid = $("#tableVisualization");

それはすべての代替呼び出しで機能します。

たとえば、コード全体が という javascript メソッド内にある場合、そのメソッドLoadGrid()の最初の呼び出しは機能し、2 番目の呼び出しは機能せず、3 番目の呼び出しは機能し、4 番目の呼び出しは機能しません。

デバッグ中に見たことがgrid.jqGrid('GridUnload')ありますが、偶数呼び出しで " " に達したとき、グリッドは完全に削除され (html テーブルが削除されたかどうかはわかりません)、実行中に作成されませんでした"$("#tableVisualization").jqGrid({.....});"。

誰でもこの行動の理由を説明してもらえますか。

ローカル変数を使用していないため、シナリオを機能させることができますが、なぜ機能しないのか知りたいですか?

4

1 に答える 1

2

GridUnloadグリッドのメソッド内で何が起こっているかを正確に見ることができますgrid.custom.js:

GridUnload : function(){
    return this.each(function(){
        if ( !this.grid ) {return;}
        var defgrid = {id: $(this).attr('id'),cl: $(this).attr('class')};
        if (this.p.pager) {
            $(this.p.pager).empty().removeClass("ui-state-default ui-jqgrid-pager corner-bottom");
        }
        var newtable = document.createElement('table');
        $(newtable).attr({id:defgrid.id});
        newtable.className = defgrid.cl;
        var gid = $.jgrid.jqID(this.id);
        $(newtable).removeClass("ui-jqgrid-btable");
        if( $(this.p.pager).parents("#gbox_"+gid).length === 1 ) {
            $(newtable).insertBefore("#gbox_"+gid).show();
            $(this.p.pager).insertBefore("#gbox_"+gid);
        } else {
            $(newtable).insertBefore("#gbox_"+gid).show();
        }
        $("#gbox_"+gid).remove();
    });
},

理解すべき重要なポイントは次のとおりです。

  • 新しい要素は、古いテーブルtableと同じ DOM で挿入されます。への呼び出しで作成され、への呼び出しの 1 つに挿入されidていることがわかります。document.createElement('table')insertBefore
  • 既存の jqGrid DOM は への呼び出しで削除されます$("#gbox_"+gid).remove()。古い table 要素は に含まれているためgbox、これも削除されます。

の呼び出し後、GridUnloadそれが参照する DOM 要素はページ上に存在しなくなるため、要素を参照するコードは無効になります。

それは役に立ちますか？

于 2012-07-27T13:50:56.730 に答える