jqGrid 和 JQuery UI 选项卡显示仅在主选项卡 (div) 上展开的网格

Question

我已将一些网格 (jqgrid) 添加到 jQuery UI Tabs 对象。默认情况下展开的选项卡子项上的所有网格都完美显示。但是默认情况下不展开的 Tab 子项上的网格会永久显示较小的 jqGrid（jqgrid 的 autowidth=true）。有什么想法吗？

谢谢！

请参阅http://www.revolucion7.com/wp-content /uploads/2009/10/jqgridp1.JPG

换句话说...

我在一个页面上有两个选项卡，每个选项卡上都有 jqgrids。

两个 jqgrid 都设置了 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;
});

如果您采用这种方法，您还需要跟踪每个网格的初始化时间，因此您不必尝试如果用户单击另一个选项卡然后单击返回上一个选项卡，则第二次创建它。

Answer 2

有时您不想在显示事件上初始化 jqgrid，因为所有数据都是相似的并且可以在一个请求中提取。这种情况下，可以将所有jqgrid的宽度设置为可见的宽度，

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

然后在初始化时将每个jqgrid的width参数设置为该值。

Answer 3

我认为这可能与 这个问题

我敢打赌，在这个问题提出三年后，这个问题将会得到纠正，但我发现事实并非如此:)。我想过更新上面贾斯汀的答案，但出于与以前版本的兼容性的目的，我最终决定保留它，如果我违反了任何论坛规则，请告诉我，我将更新上面的答案

由于 jQueryUI 显示事件现已弃用，应重命名来激活，也可以使用新 API ui.index 现在已替换为 ui.newTab.index()，用于 activate 和 ui.tab.index() 用于创建。

我还发现我必须将一个函数绑定到 create 事件才能将网格放在第一个选项卡中。

总结一下，这是上面 Justin 的代码 的更新版本，希望它有所帮助，它对我有用：

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