jqueryUI选项卡中的多个jQgrids WITH filtertoolbar不起作用
我使用jqueryUI标签在同一页面上创建了多个jQGrids。两个选项卡上的数据加载正常（首先单击选项卡2 - 因为我最初没有在页面加载时加载数据）。
无论如何，要重新创建我遇到的问题，请下载以下代码（或浏览到jsfiddle链接：http://jsfiddle.net/ut5aE/）并执行以下操作：
1.）点击“标签2”
2.）单击任何搜索操作（“==”）并注意到其他搜索操作列表出现
3.）点击“标签1”
4.）单击任何搜索操作（“==”）并注意到其他搜索操作列表出现
5.）点击“标签2”左侧
6.）在第1列（“serial”）的任何列上单击任何搜索操作（“==”）。现在显示其他搜索操作的搜索操作窗口没有弹出，我在文件jquery.jqGrid.src.js中收到以下javascript错误：
行：4156 错误：无法获取未定义或空引用的属性'searchoptions'
这是错误所在的确切代码行（包括调试时拍摄的屏幕截图）：
奇怪的是，操作仅适用于所有选项卡中具有相同NAMES的列。请注意，无论您在标签之间切换的频率如何，仅在第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>
以上代码是帖子的修改版本： Multiple jQgrids in jQueryui Tabs
它包括最新版本的JQgrid和更新的jQuery UI。 stackoverflow发布没有使用“filterToolbar”，我的问题特别针对上面这个问题中提到的缺陷。上面的代码片段还会加载一行示例数据。
有没有人有解决方案或这是jQgrid中的错误？
提前谢谢你，
1 个答案:
答案 0 :(得分：1)
我想我已经解决了这个问题的原因。
在代码中找到以下内容：
$(".soptclass").click(function(e){将其替换为：
$($t.grid.hDiv).find(".soptclass").click(function(e){经过一番调查后，看来点击功能 适用于当前存在的所有网格，这只会导致 最后一个网格工作正常通过更改定义的代码 单击事件并将其限制为仅适用于它的一个表 正确。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？