jqgrid做表格
jqgrid做表格很方便，mark一个简单的例子
以下是一个从外部或许数据的例子，用json来传值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>qgrid.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link id="uiThemes" rel="stylesheet" type="text/css" media="screen" href="styles/themes/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/themes/ui.jqgrid.css" />
<!-- 引入jQuery -->
<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
<script src="scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="scripts/jQuery/plugins/grid.locale-zh_CN.js" type="text/javascript"></script>
<script src="scripts/jQuery/plugins/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="gridTable"></table>
<div id="gridPager"></div>
<script type="text/javascript">
$(function()
{
$("#gridTable").jqGrid({
datatype: "local",
height: 250,
colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:10,
rowList:[10,20,30],
pager:"#gridPager",
caption: "第一个jqGrid例子"
}).navGrid('#gridPager',{edit:false,add:false,del:false});
var mydata = [
{id:"1",userName:"polaris",gender:"男",email:"[email protected]",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
{id:"2",userName:"李四",gender:"女",email:"[email protected]",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
{id:"3",userName:"王五",gender:"男",email:"[email protected]",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
{id:"4",userName:"马六",gender:"女",email:"[email protected]",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
{id:"5",userName:"赵钱",gender:"男",email:"[email protected]",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
{id:"6",userName:"小毛",gender:"男",email:"[email protected]",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
{id:"7",userName:"小李",gender:"女",email:"[email protected]",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
{id:"8",userName:"小三",gender:"男",email:"[email protected]",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
{id:"9",userName:"孙先",gender:"男",email:"[email protected]",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
});
</script>
</body>
</html>
以下是一个从外部或许数据的例子，用json来传值
<script type="text/javascript">
$(function()
{
$("#gridTable").jqGrid({
url:'jqGridServlet',
datatype: "json",
height: 250,
colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'userName',index:'userName', width:90},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:10,
rowList:[10,20,30],
jsonReader:{
repeatitems : false
},
pager:"#gridPager",
caption: "jqGrid与Servlet集成"
}).navGrid('#gridPager',{edit:false,add:false,del:false});
})
</script>
</head>
<body>
<table id="gridTable"></table>
<div id="gridPager"></div>
</body>