显示网格的jqGrid和JQuery UI选项卡仅在主选项卡（div）上展开
我在jQuery UI Tabs对象中添加了一些网格（jqgrid）。 Tabs子项上默认展开的所有网格都显示完美。 但是默认情况下未展开的Tab子项上的网格会永久显示jqGrid为小（jqgrid为autowidth = true）。 有任何想法吗？
谢谢！
见http://sofzh.miximages.com/jquery/jqgridp1.JPG
换句话说……
我在页面上有两个标签，每个标签都有jqgrids。
两个jqgrids都有autowidth属性设置，问题是当页面加载第一个网格被调整到容器的大小但是当我点击第二个选项卡时，第二个网格没有调整到容器的大小。
你是如何在其他标签上初始化jqGrids的？ 使用show事件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; });
如果您正在使用此方法，则还需要跟踪每个网格的初始化时间，因此如果用户单击另一个选项卡然后单击返回上一个选项卡，则不会尝试再次创建它。
有时您不希望在show事件上初始化jqgrid，因为所有数据都相似，并且可以在一个请求中提取。 在这种情况下，您可以将所有jqgrids的宽度设置为可见宽度
var tab_width = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").width();
然后在初始化时将每个jqgrid的width参数设置为此值。
实际上，您可以通过向Tab Show事件添加resize来简化：
$( '#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); }); } }});
我认为这可能与此问题重复
我打赌这个问题被问到三年后这个问题会得到纠正，但我认为不是:)。 我想到了更新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; } });
#grid,.ui-jqgrid,.ui-jqgrid-hdiv,.ui-jqgrid-view,.ui-jqgrid-titlebar,.ui-jqgrid-bdiv,.ui-jqgrid-pager { width: 100% !important; }