Jqgrid 服务器端数据未加载到第二个 Jquery 选项卡中
Jqgrid server side data not loaded in the second Jquery tab
我有一个 html 文件和一个使用 jqgrid 和 jquery 标签的 js 文件,其中有 3 个 table 标签。服务器端数据已在第一个选项卡中正确加载,但未在第二个和第三个选项卡中加载。请提出我在这里缺少的内容。
$('#tabs').tabs({ // inside Ajax success callback
activate: function (event, ui) {
if (jsondata.object1.total > 0) {
if (ui.newTab.index() === 0 && initGrids[ui.newTab.index()] === false) {
colD = jsondata.object1.colData; // server Json str
colN = jsondata.object1.colNames;
colM = jsondata.object1.colModel;
jQuery("#list").jqGrid({
jsonReader: {
cell: "",
repeatitems: false,
root: "colData",
id: "0"
},
mtype: 'POST',
datatype: 'jsonstring',
datastr: colD,
colNames: colN,
sortable: true,
colModel: colM,
autowidth: true,
height: '50%',
pager: jQuery('#pager'),
rowNum: 50,
rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
viewrecords: true
});
initGrids[ui.newTab.index()] = true;
}
}
if (jsondata.object2.total > 0) {
if (ui.newTab.index() === 1 && initGrids[ui.newTab.index()] === false) {
colD = jsondata.object2.colData;
colN = jsondata.object2.colNames;
colM = jsondata.object2.colModel;
jQuery("#list2").jqGrid({
jsonReader: {
cell: "",
repeatitems: false,
root: "colData",
id: "0"
},
mtype: 'POST',
datatype: 'jsonstring',
datastr: colD,
colNames: colN,
sortable: true,
colModel: colM,
autowidth: true,
height: '50%',
pager: jQuery('#pager2'),
rowNum: 50,
rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
viewrecords: true
});
initGrids[ui.newTab.index()] = true;
}
}
if (jsondata.object3.total > 0) {
if (ui.newTab.index() === 2 && initGrids[ui.newTab.index()] === false) {
colD = jsondata.object3.colData;
colN = jsondata.object3.colNames;
colM = jsondata.object3.colModel;
jQuery("#list3").jqGrid({
jsonReader: {
cell: "",
repeatitems: false,
root: "colData",
id: "0"
},
mtype: 'POST',
datatype: 'jsonstring',
datastr: colD,
colNames: colN,
sortable: true,
colModel: colM,
autowidth: true,
height: '50%',
pager: jQuery('#pager3'),
rowNum: 50,
rowList: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000, 4000, 5000],
viewrecords: true
});
initGrids[ui.newTab.index()] = true;
}
}
}
});
<div id="gridWrapper">
<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="list"> // this table works perfectly
<tr>
<td/>
</tr>
</table>
<div id="pager"/>
</div>
<div id="tabs-2">
<table id="list2">
<tr>
<td/>
</tr>
</table>
<div id="pager2"/>
</div>
<div id="tabs-3">
<table id="list3">
<tr>
<td/>
</tr>
</table>
<div id="pager3"/>
</div>
</div>
请检查此代码,为什么服务器端数据 json 仅加载到 jqgrid table 的第一个选项卡中 table。
如果您使用 html4 或 html5,您的 html 定义就会出错 - div 标签不能有自闭标签。 - 即定义应更改为:
<div id="gridWrapper">
<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">
grid 1
<table id="list">
<tr>
<td><td>
</tr>
</table>
<div id="pager"></div>
</div>
<div id="tabs-2">
grid 2
<table id="list2">
<tr>
<td><td>
</tr>
</table>
<div id="pager2"></div>
</div>
<div id="tabs-3">
grid 3
<table id="list3">
<tr>
<td><td>
</tr>
</table>
<div id="pager3"></div>
</div>
</div>
同样适用于 table 数据元素 td。
我检查了你的代码,它运行良好。
此外,您还需要检查您的条件
if (jsondata.object2.total > 0) {
if (ui.newTab.index() === 0 && initGrids[ui.newTab.index()] === false) {
...