Question

我遇到了一个需要帮助的问题。我有3个jQueryUI选项卡。第一个包含项目网格。第二个包含工作订单网格。第三个只是发出警报以验证show功能是否正常。问题是第二个选项卡上没有网格。第一个加载正常。如果我注释掉第一个选项卡的代码，第二个网格显示正常。第三个选项卡每次都会触发警报。我有一个灯箱，我用来编辑选择的项目工作正常。这是相关的代码：

jQuery(document).ready(function () {
        $('#tabs').tabs({
show: function(event, ui) {
    if(ui.index == 0)
    {
     jQuery("#list1").jqGrid({
...
pager: '#pager1',
...
jQuery("#list1").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false});         
}
    else if(ui.index == 1)
    {
     $("#list").jqGrid({
...
pager: '#pager',
....
onSelectRow: function(id){ 
  if(id){ 
    alert(id);
     onclick=openbox('Edit Work Order', 1);
    ...

    else if(ui.index == 2)
    {
     alert('tab2');
    }
}

我感谢您提供的任何帮助。

Answer 1

可能您的问题存在是因为您使用了HTML代码

<div id="tabs-1">
   <table id="list1"><tr><td/></tr></table>
   <div id="pager1"/>
</div>
<div id="tabs-2">
   <table id="list"><tr><td/></tr></table>
   <div id="pager"/>
</div>
<div id="tabs-3">
    <p>Bla bla</p>
</div>

而不是

<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>

我将您的代码修改为以下

jQuery(document).ready(function () {
    var initGrids= [false,false];
    $('#tabs').tabs({
        show: function (event, ui) {
            if (ui.index === 0 && initGrids[ui.index] === false) {
                jQuery("#list1").jqGrid({
                    url: 'fillgrid.php',
                    datatype: 'json',
                    mtype: 'GET',
                    colNames: ['serial', 'type', 'origin', 'subtype', 'refreshdate'],
                    colModel: [
                        { name: 'id', index: 'id', width: 55 },
                        { name: 'type', index: 'type', width: 90 },
                        { name: 'origin', index: 'origin', width: 80, align: 'right' },
                        { name: 'subtype', index: 'subtype', width: 80, align: 'right' },
                        { name: 'refreshdate', index: 'refreshdate', width: 80, align: 'right' }
                    ],
                    pager: '#pager1',
                    rowNum: 10,
                    rowlist: [10, 20, 30],
                    sortname: 'id', // NOT 'serial',
                    sortorder: 'desc',
                    viewrecords: true,
                    caption: 'CPE Items',
                    width: 950
                });
                jQuery("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false });
                initGrids[ui.index] = true;
            }
            else if (ui.index === 1 && initGrids[ui.index] === false) {
                $("#list").jqGrid({
                    url: 'fillgridwo.php',
                    datatype: 'json',
                    mtype: 'GET',
                    colNames: ['Job Number', 'Date', 'System', 'Status', 'Technician', 'Timeframe'],
                    colModel: [
                        { name: 'id', index: 'id', width: 55 },
                        { name: 'Date', index: 'date', width: 90 },
                        { name: 'System', index: 'wsystem', width: 80, align: 'right' },
                        { name: 'Status', index: 'status', width: 80, align: 'right' },
                        { name: 'Technician', index: 'wname', width: 80, align: 'right' },
                        { name: 'Timeframe', index: 'time', width: 80, align: 'right' }
                    ],
                    pager: '#pager',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'id', // NOT 'jobno' or 'Job Number'
                    sortorder: 'desc',
                    viewrecords: 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 });
                initGrids[ui.index] = true;
            }
            else if (ui.index === 2) {
                alert('tab2');
            }
        }
    });
});

我添加了数组initGrids，它将仅用于初始化每个网格一次，评论不清楚的代码，如onclick = openbox('Edit Work Order', 1);和修复sortname。

您可以看到the demo。网格包含将不会填充，因为服务器上没有任何服务器组件

Answer 2

我知道这是一个老问题。但我也遇到了同样的问题，我在标签下有多个jqGrids，加载的东西不起作用。在定义网格之前在javascript中添加以下代码对我有用：

$('#Grid').jqGrid('GridDestroy');

对我来说，不同标签上的网格只有网格中的数据才会发生变化。

jQueryui选项卡中有多个jQgrids

2 个答案: