jQuery自动适应Grid的解决方案

我们在使用jquery grid的时候会碰到数据表格的宽度设置的问题，grid提供了一个宽度设置的属性autowidth:auto的时候grid能够适应页面的宽度，但是如果窗口resize之后就会遇到grid数据表格不能自适用页面宽度的问题，经过在告警列表的开发之后对grid也进行了一些研究有了点解决思路：

就是通过grid的一个方法setGridWidth来动态的给grid赋值

html代码：

<style type="text/css">
.gridContainer
{
	   overflow:hidden;
	   width:100%;
}
</style>
 <div class="gridContainer" id="gridContainer">
	<table id="rowedcategory"></table>
	 <div id="prowedcategory"></div>
 </div>

js 代码：

jQuery("#rowedcategory").jqGrid({
				   	url:path+'/servlet/alarm?method=query',
				   	colNames:['告警id','告警内容','级别','发生次数','维度','首次发生时间','最近发生时间','指标'],
				   	remapColumns:['alarmId','workEffortName','priority','revisionNumber','dimDesc','occurDate','actualStartDate','itemDescription'],
				   	colModel:[
						{name:'alarmId',index:'alarmId', width:10,sortable:false,hidden:true},
				   		{name:'workEffortName',index:'workEffortName', width:100,sortable:false},
				   		{name:'priority',index:'priority', width:20,sortable:false},
				   		{name:'revisionNumber',index:'revisionNumber', width:30,sortable:false},
				   		{name:'dimDesc',index:'dimDesc', width:100,sortable:false},
				   		{name:'occurDate',index:'occurDate', width:70,sortable:false},
				   		{name:'actualStartDate',index:'actualStartDate', width:70,sortable:false},
				   		{name:'itemDescription',index:'itemDescription', width:40,sortable:false}
				   		],
				   	jsonReader:{id:"alarmId"},
				   	viewrecords: true,
				   	pager: '#prowedcategory',
				    autowidth:true,
				    height:400,
					gridComplete: function(){
					}
				});
				jQuery("#rowedcategory").jqGrid('navGrid',"#prowedcategory",{edit:false,add:false,del:false});
                  	}
                        function setGridWidth(){
                              var newGridWidth = $("#gridContainer").width()-2;
                              $("#rowedcategory").setGridWidth(newGridWidth );
                        }
                        $(document).ready(function(){
                              setGridWidth();
                        });
                  	 $(window).bind("resize",function(){
                             setGridWidth();
             		});

手动触发自适用操作时加这段代码：

$("$changeWidth").bind("click",function(){
       $(window).trigger("resize");
});

FROM: http://www.xpdesigner.com.cn/wordpress/?p=45