jqGrid GridUnload - 卸载后无法引用 <table> 元素答案

【问题标题】：jqGrid GridUnload - unable to reference <table> element after unloadjqGrid GridUnload - 卸载后无法引用 <table> 元素
【发布时间】：2013-09-05 23:47:27
【问题描述】：

我已经搜索了很长时间，试图弄清楚为什么 GridUnload 对我没有任何帮助。因此，如果您发现这是重复的，请见谅。

我在 jQuery.dialog 中显示一个 jqGrid。第一次显示没有问题。当我关闭对话框并再次触发时，jqGrid 不显示。该对话框基于登录操作的 AJAX 响应触发。如果对话框关闭，我想卸载网格，这样如果再次尝试登录操作，它将再次显示对话框和网格。第二次网格是空白的。

我知道 GridUnload 会创建一个新元素，然后删除旧元素，因此我确保我没有使用可能引用旧元素的变量。

我的对话框和 jqGrid 代码如下所示。

function changeAccountSelection(isLogon) {
    acctDialog = $("#accountSelectionDialog").dialog({
        autoOpen: false, draggable: true, closeOnEscape: false, resizable: true, position: "center",
        height: 505,
        width: 700,
        title: 'Select An Account',
        modal: true,
        open: function () {
            $("#accountSelectionGrid").jqGrid('GridUnload');
            //alert($("#accountSelectionGrid").get());
            $("#accountSelectionGrid").jqGrid({
                url: "AccountSelectionData?catalogId=10051&langId=-1&storeId=10751",
                datatype: "json",
                mtype: "GET",
                colNames: ["","Customer No.", "Customer Name", "DBA", "Address"],
                colModel: [
                    { name: "login", width: 110, align: "center", search:false, formatter: loginFormatter },
                    { name: "customerNumber", width: 110 },
                    { name: "customerName", width: 180 },
                    { name: "dba", width: 150 },
                    { name: "address", width: 200 }
                ],
                pager: "#accountSelectionNav",
                autowidth: true,
                rowNum: 10,
                rowTotal: 2000,
                rowList: [10, 20, 30],
                loadonce: true,
                sortname: "customerNumber",
                sortorder: "asc",
                viewrecords: true,
                height: 350
            });
            $("#accountSelectionGrid").jqGrid("navGrid","#accountSelectionNav",{edit:false,add:false,del:false});
            $("#accountSelectionGrid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});

        },
        close: function (e) {
            $(this).empty();
            $(this).dialog('destroy');
            if (isLogon) {
                // change this to an AJAX logoff call
                LogonFormJS.LogoffAjax();

            }
        }
    });
    acctDialog.dialog("open");    
}

我的 html 看起来像这样...

<link rel="stylesheet" type="text/css" media="screen" href="${jspStoreImgDir}css/jquery-ui-1.10.3.redmond.css" />
<link rel="stylesheet" type="text/css" media="screen" href="${jspStoreImgDir}css/ui.jqgrid.css" />
<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/jqGrid/i18n/grid.locale-en.js"/>"></script>
<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/jqGrid/jquery.jqGrid.min.js"/>"></script>
....
<div id="accountSelectionDialog">
    <table id="accountSelectionGrid"><tr><td></td></tr></table>
    <div id="accountSelectionNav"></div>
</div>

我的 JSON 数据样本是...

{"page": 1,
    "total": 1,
    "records": 4,
    "rows":[
        {"id":"765126369","cell":["126369","Company ABC #102","","1234 TEST DR<br/>HOMETOWN, MI 49087"]},
        {"id":"765140373","cell":["140373","Company ABC #110","","1234 TEST DR<br/>HOMETOWN, MI 49087"]},
        {"id":"765140366","cell":["140366","Company XYZ #225","","1234 TEST DR<br/>HOMETOWN, IN 46637"]},
        {"id":"765140367","cell":["140367","Company XYZ #053","","1234 TEST DR<br/>HOMETOWN, IN 46530"]},
    ]}

我尝试将我的 GridUnload 移动到不同的操作点，但它仍然不起作用。我在 GridUnload 之后插入了一个“警报”，结果如下...... 第一次显示对话框并且网格尚未初始化但警报显示“[object HTMLTableElement]”。第二次显示对话框时，警报的结果是空白的（甚至不是未定义的......只是空白）。 #accountSelectionGrid 的 jQuery 搜索确实返回了一个对象，但没有与之关联的 HTML 元素。

我知道我可能遗漏了一些简单的东西，所以我希望有人可以帮助我。

谢谢

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

在您提到的对话框关闭功能中，如 ....

$(this).dialog('destroy');

=>......它的行为就像

它将从 DOM 本身中删除元素（特定对话框），当您尝试关闭对话框时。

下次如果我们尝试打开对话框...它将检查特定的对话框元素在 DOM 中是否可用

结果是 No...因为它不可用，我们已经使用 .dialog('destroy');

从 DOM 中删除了该元素

使用的最佳实践.. $(this).dialog('close');

对话框将关闭，但该元素仍可用于 DOM....打开对话框时将可用....当用户一次又一次地尝试打开对话框

【讨论】：

【解决方案2】：

我知道我错过了一些愚蠢的东西。我发现我的问题是由我的对话框中的 $(this).empty() 和 $(this).dialog('destroy') 调用引起的。这两个调用，主要是 empty() 调用让我的网格表崩溃了。因此，当我尝试初始化 jqGrid 时，它没有显示任何内容，因为元素消失了（至少这是我的猜测）。更改对 dialog('close') 的调用并保持我的对话框完整解决了问题。

close: function (e) {
    $(this).dialog('close');
    if (isLogon) {
        LogonFormJS.LogoffAjax();

    }
}

【讨论】：