jQueryui中的多个jQgrid选项卡

我遇到了一个我需要帮助的问题。我有3个jQueryUI标签。第一个拥有一个网格物品。第二个拥有工作订单网格。第三个只是发出警报来验证显示功能正在工作。问题是我在第二个选项卡上没有网格。第一个加载罚款。如果我注释掉第一个选项卡的代码，第二个网格显示正常。第三个选项卡每次都会发出警报。我有一个灯箱，我用它来编辑选择哪些工作正常的项目。这里是相关的代码：jQueryui中的多个jQgrid选项卡

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'); 
    } 
}

我感谢您可以给的任何帮助。

来源

2011-02-23 Bill

你应该修改你的问题，并包含更多可用于重现问题的完整代码。代码片段中的一个常见问题：应该调用jQuery（“＃list1”）。jqGrid（{...}）;和$（“＃list”）。jqGrid（{...}）;'一次，而不是非常标签选择。在http://www.jslint.com/中验证您的JavaScript代码是否有语法错误可能会有所帮助。 'onclick = openbox'（'Edit Work Order'，1）'这行看起来很奇怪。 – Oleg 2011-02-23 17:31:03

可能是你的问题存在，因为你使用的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。网格包含将不会被填充，因为我没有服务器上的任何服务器组件

来源

2011-02-23 21:25:04 Oleg

适当！你一直在帮助很大。我确实必须将sortname的值更改回列名，否则我得到了一个mySQL错误未知列'id'。 onclick事件弹出一个灯箱，允许管理员编辑工单或项目。我试图回到你的例子，但没有发生onclick。我需要有这个功能。更奇妙的想法？再次感谢一百万的帮助！ – Bill 2011-02-24 00:31:29

明白了！我不得不包含一些特定于我正在使用的灯箱实现的HTML，并且它像顶部一样旋转！奥列格我欠你一杯啤酒！ – Bill 2011-02-24 01:09:14

@Bill：如果您在服务器上使用另一个名称作为'colModel'中的'names'，那么您应该使用'colModel'的'index'属性。然后，如果用户点击该列，index属性的值将用作服务器上的“sortname”或“sidx”。 – Oleg 2011-02-24 08:49:15

我知道它的一个老问题。但我也遇到了同样的问题，我在标签下有多个jqGrid，加载的东西没有工作。添加在JavaScript下面的代码只是定义网格为我工作之前：

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

对于我来说，在不同的选项卡上的网格，其中网格内的同一只数据变化。

来源

2013-03-11 15:20:57 tarares

jQueryui中的多个jQgrid选项卡

回答

相关问题