jquery-ui – jQueryui选项卡中的多个jQgrids

我遇到了一个需要帮助的问题.我有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');
    }
}

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

解决方法

可能因为您使用了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',{ name: 'refreshdate',index: 'refreshdate',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',{ edit: false,add: false,del: false });
                initGrids[ui.index] = true;
            }
            else if (ui.index === 1 && initGrids[ui.index] === false) {
                $("#list").jqgrid({
                    url: 'fillgridwo.PHP',colNames: ['Job Number','Date','System','Status','Technician','Timeframe'],{ name: 'Date',index: 'date',{ name: 'System',index: 'wsystem',{ name: 'Status',index: 'status',{ name: 'Technician',index: 'wname',{ name: 'Timeframe',index: 'time',pager: '#pager',rowList: [10,// NOT 'jobno' or 'Job Number'
                    sortorder: 'desc',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',del: false });
                initGrids[ui.index] = true;
            }
            else if (ui.index === 2) {
                alert('tab2');
            }
        }
    });
});

我包含了数组initGrids,它只用于初始化每个网格一次,评论不清楚的代码,如onclick = openBox(‘Edit Work Order’,1);和固定的排序名称.

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