2
我使用jqueryUI選項卡在同一頁面上創建了多個jQGrid。數據在兩個選項卡上均可正常加載（首先單擊選項卡2 - 因爲我最初並未在頁面加載中加載數據）。在jqueryUI中使用filtertoolbar的多個jQgrids選項卡不工作
不管怎樣，重建我遇到下載下面的代碼的問題（或瀏覽到的jsfiddle鏈接：http://jsfiddle.net/ut5aE/）並執行以下操作：
1）單擊「選項卡2」
2）點擊任何搜索操作（「==」）並注意到其他搜索操作列表出現。
3.）單擊「選項卡1」
4.）單擊任何搜索操作（「==」）並注意到其他搜索操作列表出現。
5.）單擊「選項卡2」
6.）單擊第一列（「串行」）以外的任何列的任何搜索操作（「==」）。現在顯示的其他搜索業務的搜索操作窗口不彈出，我得到的文件jquery.jqGrid.src.js以下JavaScript錯誤：
Line: 4156 Error: Unable to get property 'searchoptions' of undefined or null reference
這是代碼的錯誤的確切行是（包括調試時採取截屏）：
奇怪的是，該操作僅針對已在所有選項卡中的相同名稱的列工作。注意，只有在第一列（例如「串行」）上單擊搜索操作（「==」）纔會在兩個選項卡上工作，無論您在多個選項卡之間切換的頻率如何。但是當你點擊它們時，其他搜索選項不能在標籤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中的錯誤？
謝謝你在前進，