jqgrid宽度高度自适应
javaer 2011-04-13
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>jqgrid宽度高度自适应</title>
<linkrel="stylesheet"type="text/css"media="screen"href="jquery/jquery-ui/css/redmond/jquery-ui-1.8.11.custom.css"/>
<linkrel="stylesheet"type="text/css"media="screen"href="jquery/jqgrid/css/ui.jqgrid.css"/>
<scriptsrc="jquery/jquery-1.5.2.min.js"type="text/javascript"></script>
<scriptsrc="jquery/jqgrid/js/i18n/grid.locale-cn.js"type="text/javascript"></script>
<scriptsrc="jquery/jqgrid/js/jquery.jqGrid.min.js"type="text/javascript"></script>
<style>
<!--
.zebra-striped{
background:#efefff50%50%repeat-x;
}
-->
</style>
<scriptlanguage='javascript'><!--
$(function(){
$("#gridTable").jqGrid({
url:'userData.action',
datatype:"json",
autowidth:false,
altRows:true,
altclass:"zebra-striped",
colNames:['登录名','姓名','性别','邮箱'],
colModel:[
{name:'loginName',index:'loginName',width:160,sorttype:"int"},
{name:'realName',index:'realName',width:190},
{name:'gender',index:'gender',width:190},
{name:'email',index:'email',width:290}
],
sortname:'userId',
sortorder:'asc',
viewrecords:true,
rowNum:20,
rowList:[20,30,50,100,150],
jsonReader:{
repeatitems:false,
id:"userId",
total:"totalPageCount",
page:"pageNumber",
records:"totalRecordCount"
},
toolbar:[true,"top"],
pager:"#gridPager",
rownumbers:true,
//multiselect:true,
pagerpos:"left"
}).navGrid('#gridPager',{edit:false,add:false,del:false,refresh:false,search:false});
doResize();
});
vart=document.documentElement.clientWidth;
window.onresize=function(){
if(t!=document.documentElement.clientWidth){
t=document.documentElement.clientWidth;
doResize();
}
}
functiondoResize(){
varss=getPageSize();
$("#gridTable").jqGrid('setGridWidth',ss.WinW-10).jqGrid('setGridHeight',ss.WinH-100);
}
functiongetPageSize(){
//http://www.blabla.cn/js_kb/javascript_pagesize_windowsize_scrollbar.html
varwinW,winH;
if(window.innerHeight){//allexceptIE
winW=window.innerWidth;
winH=window.innerHeight;
}elseif(document.documentElement&&document.documentElement.clientHeight){//IE6StrictMode
winW=document.documentElement.clientWidth;
winH=document.documentElement.clientHeight;
}elseif(document.body){//other
winW=document.body.clientWidth;
winH=document.body.clientHeight;
}//forsmallpageswithtotalsizelessthentheviewport
return{WinW:winW,WinH:winH};
}
//http://www.wsria.com/archives/1147有另一种算法
--></script>
</head>
<bodystyle="margin:5px5px">
<tableid="gridTable"></table>
<divid="gridPager"></div>
</body>
</html>
