六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 32|回复: 0

jqgrid宽度高度自适应

[复制链接]

升级  72%

42

主题

42

主题

42

主题

秀才

Rank: 2

积分
158
 楼主| 发表于 2013-2-7 17:16:32 | 显示全部楼层 |阅读模式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqgrid宽度高度自适应</title>

<link rel="stylesheet" type="text/css" media="screen" href="jquery/jquery-ui/css/redmond/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/jqgrid/css/ui.jqgrid.css" />

<script src="jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="jquery/jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="jquery/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style>
<!--
.zebra-striped {
background: #efefff 50% 50% repeat-x;
}
-->
</style>

<script language='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();
});

var t=document.documentElement.clientWidth;  
window.onresize = function(){  
if(t != document.documentElement.clientWidth){
t = document.documentElement.clientWidth;
doResize();
}
}

function doResize() {
var ss = getPageSize();
$("#gridTable").jqGrid('setGridWidth', ss.WinW-10).jqGrid('setGridHeight', ss.WinH-100);
    }

function getPageSize() {
//http://www.blabla.cn/js_kb/javascript_pagesize_windowsize_scrollbar.html
var winW, winH;
if(window.innerHeight) {// all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {// IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
}  // for small pages with total size less then the viewport  
return {WinW:winW, WinH:winH};
}

//http://www.wsria.com/archives/1147有另一种算法
--></script>
</head>
<body style="margin: 5px 5px">
<table id="gridTable"></table>
<div id="gridPager"></div>
</body>
</html>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表