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

Question

Я добавил несколько сеток (jqgrid) в объект вкладок jQuery UI. Все сетки на дочерних вкладках, развернутые по умолчанию, отображаются отлично. Но сетки на дочерних элементах Tab, которые по умолчанию НЕ развернуты, постоянно показывают малый jqGrid (jqgrid с autowidth = true). Есть идеи?

Спасибо!

См. http://www.revolucion7.com/wp-content/uploads/2009/10/jqgridp1.JPG

Другими словами ...

У меня есть две вкладки на странице с jqgrids на каждой.

В обоих jqgrids установлено свойство autowidth, проблема в том, что при загрузке страницы первая сетка настраивается на размер контейнера, но когда я щелкаю по второй вкладке, вторая сетка не корректируется под размер контейнера.

Answer 1

Как вы инициализируете 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;
});

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

Answer 2

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

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

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

Answer 3

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

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

Из-за изменений в 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;
  }
});

Answer 4

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

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

Answer 5

#grid,.ui-jqgrid,.ui-jqgrid-hdiv,.ui-jqgrid-view,.ui-jqgrid-titlebar,.ui-jqgrid-bdiv,.ui-jqgrid-pager
{
width: 100% !important;
}