jquery grid能自适用窗口大小解决方案

jquery grid是富客户端的，基于XML ， Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案，代表和编辑表格数据在网络上。精心设计的，具有强大的脚本API的，这可编辑网格是很简单的DHTML与XML 的配置，并显示出令人信服的成果与大量数据。现在我现在熟悉一下jquery grid的的使用方法和一些常用的option设置。

 

 

1.调用grid

jqGrid已经可以从Server端获得数据，并显示在Grid表格中了。下面说一下，如何操作Grid表格及其数据。
jqGrid有很多方法函数，用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式：

$("#grid_id").jqGridMethod( parameter1,...,parameterN );

或者

$("#grid_id").jqGrid('method', parameter1,...,parameterN );  

具体解决思路：

 

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

 

html代码：

<mce:style type="text/css"><!-- .gridContainer { overflow:hidden; width:100%; } --></mce:style><style type="text/css" mce_bogus="1">.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}); } $(window).bind("resize",function(){ $("#rowedcategory").setGridWidth($("#gridContainer").width()); });  

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

 

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