jqgrid - 在备用调用上重新加载后网格无法工作

Question

$("#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");

每次交替调用都有效。

例如，如果整个代码位于名为 LoadGrid() 的 javascript 方法内，则对该方法的第一次调用有效，第二次调用无效，第三次调用有效，第四次调用无效，依此类推。

我在调试过程中看到，当它在偶数调用中达到“grid.jqGrid('GridUnload')”时，网格被完全删除(我不确定html表格是否被删除或不是)并且它不是在 "$("#tableVisualization").jqGrid({.....});" 期间创建的。

任何人都可以向我解释一下这种行为的原因吗？

我可以使该场景工作，因为现在我没有使用局部变量，但我想知道为什么它不起作用？

Answer 1

我们可以在 grid.custom.js 中准确地看到网格的 GridUnload 方法中发生了什么。 :

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 id 与旧表相同。我们可以看到它是在对 document.createElement('table') 的调用中创建的，并插入到对 insertBefore 的调用之一中。
• 调用 $("#gbox_"+gid).remove() 时会删除现有的 jqGrid DOM。由于旧的表格元素包含在 gbox 中，因此它也会被删除。

调用 GridUnload 后，它引用的 DOM 元素不再存在于页面上，因此引用该元素的任何代码都无效。

这有帮助吗？