Question

我已经搜索了很长时间并努力尝试找出为什么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之后插入了一个'alert'，结果如下...... 第一次显示对话框并且网格尚未启动但警报显示“[object HTMLTableElement]”。第二次显示对话框时，警报的结果为空白（甚至不是未分开的......只是空白）。 jQuery搜索#accountSelectionGrid会返回一个对象，但没有与之关联的HTML元素。

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

由于

Answer 1

在对话框关闭功能中你提到了......

<强> $（本）.dialog（ '破坏'）;

=＆gt; ......表现得像

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

下次如果我们试图打开对话框......它会检查DOM中是否有特定的对话框元素

结果是否......因为它不可用，我们已经使用 .dialog（'destroy'）从DOM中删除了该元素;

使用的最佳做法.. $（this）.dialog（'close'）;

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

Answer 2

我知道我错过了一些愚蠢的事。我发现我的问题是由我的$（this）.empty（）和$（this）.dialog（'destroy'）调用我的对话框引起的。这两个调用，主要是empty（）调用正在吹掉我的网格表。因此，当我尝试初始化jqGrid时，它没有显示任何东西，因为元素已经消失（至少这是我的猜测）。将调用更改为对话框（'关闭'）并保持对话框完好无损，解决了问题。

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

    }
}

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

2 个答案: