关于jQuery Tabs页中使用jqGrid时，产生的Grid尺寸问题

 

首先确保你的grid 已设置，shrinkToFit : false,autowidth : true

					<div id="tabs">
						<ul>
							<li><a href="#table_info">    表清理任务    </a></li>
							<li><a href="#file_info" id="file_info_a" >    文件清理任务    </a></li>
							<li><a href="#task_log_info" id="task_log_info_a">    任务日志    </a></li>
						</ul>
				
						<div id="table_info" style="padding: 10px 5px 10px 5px; height: 700px;">
							<div id="gridDiv1" style="width: 100%; height: 500px; float: left;">
								<table id="table_info_grid"></table>
								<div id="pager1"></div>
							</div>
						</div>
						<div id="file_info" style="padding: 10px 5px 10px 5px; height: 700px;">
							<div id="gridDiv2" style="width: 100%; height: 500px; float: left;">
								<table id="file_info_grid"></table>
								<div id="pager2"></div>
							</div>
						</div>
						<div id="task_log_info"style="padding: 10px 5px 10px 5px; height: 700px;">
							<div id="gridDiv3" style="width: 100%; height: 500px; float: left;">
								<table id="task_log_info_grid"></table>
								<div id="pager3"></div>
							</div>
						</div>
				
					</div>

　　

这样显示肯定会出现问题：仅第一个tab页宽度尺寸正常，其余两个tab页尺寸溢出，是由于刚进入页面的时候，jqGrid 的自适应宽度只执行一次。导致第二、三个tab页取父div宽度时候拿到的是0，所以不得不按自己的宽度来显示。那么只需要在触发切换tab的时候将tab页一的宽度拿给tab页二、三即可。

如下代码：

	$("#file_info_a").bind("click",function(){
		$("#file_info_grid").setGridWidth(autowidthbug);
		$("#task_log_info_grid").setGridWidth(autowidthbug);
		console.log(autowidthbug);
		});

	$("#task_log_info_a").bind("click",function(){
		$("#file_info_grid").setGridWidth(autowidthbug);
		$("#task_log_info_grid").setGridWidth(autowidthbug);
		console.log(autowidthbug);
		});

当然，不要忘记了autowidthbug是由页面加载时候获取的

即：

	var autowidthbug = $("#tabs").width()-10;	

貌似经过以上的调整后，大功告成。

但是当你试图改变浏览器窗口大小的时候，问题又来了，二，三tab页又出现了问题，宽度维持全窗口时候的大小。这是为什么呢？因为autowidthbug没有随浏览器大小的调整而改变，那么只需在下面添加以下代码即可。

    $(function(){
        $(window).resize(function(){   
        	autowidthbug = $("#tabs").width()-10;
  			$("#table_info_grid").setGridWidth(autowidthbug);
  			$("#file_info_grid").setGridWidth(autowidthbug);
  			$("#task_log_info_grid").setGridWidth(autowidthbug);
     	});
 	 });

这样就完美的解决的jQuery UI Tabs 和 jqGrid 整合的BUG。