Вкладки пользовательского интерфейса jqGrid и JQuery, отображающие сетки, развернутые только на основной вкладке (div)

Как вы инициализируете jqGrids на других вкладках? Вы должны инициализировать их, когда вкладка отображается с помощью события show, например:

jQuery(document).ready(function() {
 var initialized = [false, false];
 jQuery('#tabs').tabs({show: function(event, ui) {
                   if (ui.index == 0 && !initialized[0]){
                      // Initialize grid on second tab page here...
                      jQuery(NOMBRE_GRID).jqGrid({
                          url: '/Idiomas/DatosGrid/',
                          datatype: 'json',
                          mtype: 'GET',
                          height: 'auto',
                          multiselect: true,
                          autowidth: true,           
                          colNames: ['Id',  'Nombre'],
                          colModel: [
                                    { name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
                                        formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
                                    },
                                    { name: 'nombre', index: 'nombre', width: 100, align: 'left' }
                                ],
                          pager: jQuery(NOMBRE_AREA_PAGINACION),
                          rowNum: tamanoPagina,
                          rowList: [5, 10, 15, 20],
                          sortname: 'nombre',
                          sortorder: “asc”,
                          viewrecords: true,           
                          caption: 'Idiomas'
                      }).navGrid(NOMBRE_AREA_PAGINACION, { edit: false, add: false, del: false, refresh: false, search: false });
                   });


                  } else if (ui.index == 1 && !initialized[1]){
                      // Initialize grid on second tab page here...
                      jQuery(NOMBRE_GRID_SELECCIONADOS).jqGrid({
                          url: '/Idiomas/DatosGrid/',
                          datatype: 'json',
                          mtype: 'GET',
                          height: 'auto',
                          multiselect: true,
                          autowidth: true,           
                          colNames: ['Id',  'Nombre'],
                          colModel: [
                                    { name: 'id_idioma', index: 'id_idioma', width: 100, align: 'left',
                                        formatter: 'showlink', formatoptions: { baseLinkUrl: '/Idiomas/', showAction: 'Edit', addParam: '' }
                                    },
                                    { name: 'nombre', index: 'nombre', width: 100, align: 'left' }
                                ],
                          sortname: 'nombre',
                          sortorder: “asc”,
                          viewrecords: true,           
                          caption: 'Idiomas'
                      });

                   initialized[ ui.index ] = true;
});

Если вы используете этот подход, вам также нужно будет отслеживать, когда инициализируется каждая сетка, поэтому вы не пытаетесь создать ее во второй раз, если пользователь щелкает другую вкладку, а затем возвращается к предыдущей.

Иногда вы не хотите инициализировать jqgrid в событии show, так как все ваши данные похожи и могут быть получены одним запросом. В этом случае вы можете установить ширину всех jqgrids на ширину видимой

var tab_width = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").width();

Затем установите для параметра ширины каждого jqgrid это значение при инициализации.

На самом деле, вы можете сделать это проще, добавив изменение размера в событие Tab Show:

$( '#tabs' ).tabs({ show: function(event, ui) { 
  if (grid = $('.ui-jqgrid-btable:visible')) {
    grid.each(function(index) {
      gridId = $(this).attr('id');
      gridParentWidth = $('#gbox_' + gridId).parent().width();
      $('#' + gridId).setGridWidth(gridParentWidth);
    });
  }
}});

Я думаю, что это возможный дубликат с этот вопрос

Готов поспорить, что через три года после того, как был задан этот вопрос, эта проблема будет исправлена, но я вижу, что это не так :). Я думал об обновлении ответа Джастина выше, но в конце концов решил оставить его в целях совместимости с предыдущими версиями, если я нарушаю какие-либо правила форума, сообщите мне, и я обновлю ответ выше.

Из-за изменений в jQueryUI событие show теперь устарело и должен быть переименован в activate, а также с новый API ui.index теперь заменен на ui.newTab.index() для activate и на ui.tab.index() для create.

Я также обнаружил, что мне нужно привязать функцию к событию create, чтобы поместить сетку на первую вкладку.

Подводя итог, вот обновленная версия кода Джастина выше, надеюсь, это поможет, это сработало для меня:

var initialized = [false,false,false];
$( "#tabs" ).tabs({
  create:function(event,ui){
    var mytabindex = ui.tab.index()
    if (mytabindex == 0 && !initialized[0]){
       $("#grid0").jqGrid({
          ...   
          autowidth:true,
          ...  
       });
    }
    initialized[ mytabindex ] = true;
  },
  activate: function(event, ui) {
    var mytabindex = ui.newTab.index()
    if (mytabindex == 1 && !initialized[1]){
      $("#grid1").jqGrid({
         ...    
         autowidth:true,
         ...  
      });
    }
    else if (mytabindex == 2 && !initialized[2]){
      $("#grid2").jqGrid({
         ...    
         autowidth:true,
         ...
      });
    }
  initialized[ mytabindex ] = true;
  }
});