我使用 jqueryUI 选项卡在同一页面上创建了多个 jQGrid。数据在两个选项卡上都可以正常加载（首先单击选项卡 2 - 因为我最初没有在页面加载时加载数据）。
无论如何，要重新创建我遇到的问题，请下载下面的代码（或浏览 jsfiddle 链接：http: //jsfiddle.net/ut5aE/）并执行以下操作：
1.）单击“Tab 2”
2.）单击在任何搜索操作（“==”）上，并注意另一个搜索操作列表出现。
3.) 单击“Tab 1”
4.) 单击任何搜索操作（“==”）并注意出现其他搜索操作列表。
5.) 单击返回“Tab 2”
6.) 单击任何列上的任何搜索操作 ("==")，除了第一列 ("serial")。现在显示其他搜索操作的搜索操作窗口没有弹出，我在文件 jquery.jqGrid.src.js 中收到以下 javascript 错误：
行：4156 错误：无法获取未定义或空引用的属性“searchoptions”
这是错误所在的确切代码行（包括调试时拍摄的屏幕截图）：
奇怪的是，这些操作仅适用于在所有选项卡中具有相同名称的列。请注意，仅在第一列（例如“serial”）上单击搜索操作（“==”）将在两个选项卡上工作，无论您在选项卡之间切换的频率如何。但是，当您单击选项卡 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>
上面的代码是来自帖子的修改版本： Multiple jQgrids in jQueryui Tabs
它包括最新版本的 JQgrid 和更新的 jQuery UI。该 stackoverflow 发布没有使用“filterToolbar”，我的问题与上面在这个问题中提到的缺陷有关。上面的代码片段还加载了一行示例数据。
有没有人对此有解决方案，或者这是 jQgrid 中的错误？
先感谢您，