Несколько jQgrids во вкладках jQueryui

Question

У меня возникла проблема, с которой мне нужна помощь. У меня есть 3 вкладки jQueryUI. Первый содержит сетку предметов. Второй содержит сетку рабочих заданий. Третий просто запускает оповещение, чтобы убедиться, что функция шоу работает. Проблема в том, что у меня нет сетки на второй вкладке. Первый загружается нормально. Если я закомментирую код для первой вкладки, вторая сетка будет отображаться нормально. Третья вкладка выдает предупреждение каждый раз. У меня есть лайтбокс, который я использую для редактирования элементов на выбор, который работает нормально. Вот соответствующий код:

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.

Вы можете увидеть демо .Содержимое сетки будет не заполнено, потому что у меня нет серверных компонентов на сервере

Answer 2

Я знаю, это старый вопрос.Но я также столкнулся с той же проблемой, когда у меня было несколько jqGrids под вкладками, и загрузка не работала.Добавление приведенного ниже кода в javascript как раз перед определением сетки работало для меня:

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

Для меня сетки на разных вкладках, где менялись одни и те же только данные внутри сетки.