私は、なぜ GridUnload がうまく機能しないのかを理解しようと、長い間一生懸命探してきました。これが重複していることに気付いた場合は、ご容赦ください。
jQuery.dialog 内に jqGrid を表示しています。初回は問題なく表示されます。ダイアログを閉じて再度トリガーすると、jqGrid が表示されません。ダイアログは、ログイン アクションの AJAX 応答に基づいてトリガーされます。ダイアログが閉じている場合は、グリッドをアンロードして、ログイン アクションが再度試行された場合にダイアログとグリッドが再度表示されるようにします。2 回目はグリッドが空白です。
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]」が表示されます。ダイアログが 2 回目に表示されると、アラートの結果は空白になります (未定義でさえありません...単に空白です)。#accountSelectionGrid の jQuery 検索ではオブジェクトが返されますが、それに関連付けられた HTML 要素は返されません。
私はおそらく簡単なものが欠けていることを知っているので、誰かが私を助けてくれることを願っています.
ありがとう