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表）并且在{{{{{{ 1}}。

任何人都可以解释一下这种行为的原因。

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

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元素不再存在于页面上，因此引用该元素的任何代码都无效。

这有帮助吗？

重新加载备用呼叫后，网格无法正常工作

1 个答案: