jqueryUI タブを使用して、同じページに複数の jQGrid を作成しました。データは両方のタブで正常にロードされます (最初にページのロード時にデータをロードしていないため、最初にタブ 2 をクリックします)。
とにかく、私が経験している問題を再現するには、以下のコードをダウンロードして (または jsfiddle リンクを参照してください: http://jsfiddle.net/ut5aE/ )、次の操作を行います:
1.) [Tab 2] をクリックします
。任意の検索操作 ("==") で、検索操作の他のリストが表示されることに注意してください。
3.) 「タブ 1」を
クリックします。 4.) 任意の検索操作 (「==」) をクリックすると、他の検索操作のリストが表示されることに注意してください。
5.) 「タブ 2」をクリックして戻します
。 6.) 1 番目の列 (「シリアル」) を除く任意の列の検索操作 (「==」) をクリックします。他の検索操作を示す検索操作ウィンドウがポップアップせず、ファイル jquery.jqGrid.src.js で次の JavaScript エラーが発生します。
行: 4156 エラー: 未定義または null 参照のプロパティ 'searchoptions' を取得できません
これは、エラーが発生しているコードの正確な行です (デバッグ中に取得したスクリーン ショットを含む)。
奇妙なのは、すべてのタブで同じ名前を持つ列に対してのみ操作が機能することです。検索操作 (「==」) をクリックするのは、1 番目の列 (「シリアル」など) のみであり、タブを切り替える頻度に関係なく、両方のタブで機能することに注意してください。しかし、残りの検索オプションは、タブ 2 をクリックしても機能しません。他の検索操作を一覧表示するポップアップが表示されず、上記の JS エラーが発生します。
この問題をテストするための完全な作業コードは次のとおりです。同等の jsFiddle コードは次の場所にあります: http://jsfiddle.net/ut5aE/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demonstration how to mark some cells as non-editable based on grid content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
var initGrids = [false, false];
$('#tabs').tabs({
activate: function (event, ui) {
if (ui.newTab.index() == 0 && initGrids[ui.newTab.index()] == false) {
var mydata = [
{ id: "1", type: "2007-10-01", origin: "test", subtype: "note", refreshdate: "200.00" }
];
jQuery("#list1").jqGrid({
data: mydata,
datatype: 'local',
mtype: 'GET',
colNames: ['serial', 'type', 'origin', 'subtype', 'refreshdate'],
colModel: [
{ name: 'id', index: 'id', width: 55, sorttype: 'integer', search:true, searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'type', index: 'type', width: 90, sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'origin', index: 'origin', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'subtype', index: 'subtype', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'refreshdate', index: 'refreshdate', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } }
],
pager: '#pager1',
rowNum: 10,
rowlist: [10, 20, 30],
sortname: 'id', // NOT 'serial',
sortorder: 'desc',
viewrecords: true,
searchOperators: true,
caption: 'CPE Items',
width: 950
});
jQuery("#list1").jqGrid('filterToolbar', { searchOperators: true, stringResult: true, searchOnEnter: false });
initGrids[ui.newTab.index()] = true;
}
else if (ui.newTab.index() == 1 && initGrids[ui.newTab.index()] == false) {
var mydata = [
{ id: "1", Date: "2007-10-01", System: "test", Status: "note", Technician: "200.00", Timeframe: "3" }
];
$("#list").jqGrid({
data: mydata,
datatype: 'local',
mtype: 'GET',
colNames: ['serial', 'Date', 'System', 'Status', 'Technician', 'Timeframe'],
colModel: [
{ name: 'id', index: 'id', width: 75, sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'Date', index: 'date', width: 90, sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'System', index: 'wsystem', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'Status', index: 'status', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'Technician', index: 'wname', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'Timeframe', index: 'time', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } }
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id', // NOT 'jobno' or 'Job Number'
sortorder: 'desc',
viewrecords: true,
searchOperators: true,
caption: 'Work Orders',
width: 950,
onSelectRow: function (id) {
//var d;
if (id) {
alert(id);
//??? onclick = openbox('Edit Work Order', 1);
//??? d = "jobno=" + id;
$.ajax({
url: 'fillwo.php',
type: 'POST',
dataType: 'json',
data: { jobno: id },
success: function (data) {
var id;
for (id in data) {
if (data.hasOwnProperty(id)) {
$(id).val(data[id]);
}
}
}
});
$("button, input:submit").button();
}
jQuery('#list').editRow(id, true);
}
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }).jqGrid('filterToolbar', { searchOperators: true, stringResult: true, searchOnEnter: false });
initGrids[ui.newTab.index()] = true;
}
else if (ui.newTab.index() === 2) {
alert('tab2');
}
}
});
});
//]]>
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab1</a></li>
<li><a href="#tabs-2">Tab2</a></li>
<li><a href="#tabs-3">Tab3</a></li>
</ul>
<div id="tabs-1">
<table id="list1"><tr><td/></tr></table>
<div id="pager1"></div>
</div>
<div id="tabs-2">
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</div>
<div id="tabs-3">
<p>Bla bla</p>
</div>
</div>
</body>
</html>
上記のコードは、次の投稿の修正版です: 複数の jQgrids in jQueryui Tabs
JQgrid の最新バージョンと最新の jQuery UI が含まれています。そのスタックオーバーフローの投稿は「filterToolbar」を使用していませんでした。私の問題は、この質問で上記の欠陥に特に関係しています。上記のコード スニペットは、サンプル データの行も読み込みます。
誰かがこれに対する解決策を持っていますか、それともこれは jQgrid のバグですか?
前もって感謝します、