logo标签列表

jqGrid和JQuery UI选项卡只在主选项卡（div）上展开网格。

jqueryhtmljqgridtabssize
3
我已经将一些网格（jqgrid）添加到jQuery UI Tabs对象中。默认展开的Tabs子级上的所有网格都显示完美。但是，在默认情况下未展开的Tab子级上的网格永久显示jqGrid小型版（带有autowidth=true的jqgrid）。有什么想法吗？
谢谢！
请参见http://www.revolucion7.com/wp-content/uploads/2009/10/jqgridp1.JPG 换句话说...
我在页面上有两个带有jqgrid的选项卡。
两个jqgrid都设置了autowidth属性，问题是当页面加载时，第一个网格会根据容器的大小进行调整，但是当我点击第二个选项卡时，第二个网格不会自适应容器的大小。
5个回答
5

您是如何在其他选项卡上初始化jqGrid的？您应该在选项卡显示时使用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;
});

如果您使用这种方法，还需要跟踪每个网格的初始化时间，以便如果用户单击另一个选项卡，然后返回到先前的选项卡，则不会尝试再次创建它。
嗨，贾斯汀！ 感谢您的回复 :-)请查看以下代码示例： http://www.trirand.com/blog/?page_id=393/help/autowidth-with-jquery-tabs&value=ui.tabs.js%25251&search=1 - neuling_listener
我已经相应地更新了我的答案。这解决了问题吗？ - Justin Ethier
是的，适用于我...谢谢。 现在，如何在单击第一个选项卡时刷新第二个或第三个选项卡？谢谢。 - neuling_listener
为什么要刷新一个不可见的选项卡？ - Justin Ethier
我认为如果你在选项卡变得可见后刷新它，你会更有好运。但是你可以尝试刷新不可见的选项卡 - 只要确保在网格初始化后执行即可。因此，例如，在第一个选项卡的show事件中，你可能只需将代码放在那里... - Justin Ethier
解决方案非常完美。但是使用最新的jQuery大于1.10版本后，显示事件无法正常工作。 - Gopi
3

有时候，当你的数据类似并且可以在一个请求中获取时，你可能不想在展示事件上初始化jqgrid。在这种情况下，你可以将所有jqgrid的宽度设置为可见jqgrid的宽度。

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

在初始化时，将每个jqgrid的宽度参数设置为此值。

哇！多么干净简单的解决方案啊！我测试了设置“width: tab_width”，效果非常好。我喜欢它:D谢谢。 - Diosney
3

我认为这可能是与此问题重复了

我本来以为三年后这个问题会得到解决，但看来并没有 :)。我考虑更新上面Justin的答案，但最终我决定保留它以兼容之前的版本。如果我违反了任何论坛规则，请让我知道，我会更新上面的答案。

由于jQueryUI发生了变化，show事件已被弃用，应该将其改为activate，而且使用新API, ui.index现在被ui.newTab.index() 替换，用于activate和ui.tab.index()用于create。

我还发现我必须将函数绑定到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;
  }
});
2
实际上，您可以通过在选项卡显示事件中添加调整大小来简化它：
$( '#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);
    });
  }
}});
0
#grid,.ui-jqgrid,.ui-jqgrid-hdiv,.ui-jqgrid-view,.ui-jqgrid-titlebar,.ui-jqgrid-bdiv,.ui-jqgrid-pager
{
width: 100% !important;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接