jqgrid学习记要，从外部url获取json数据
日期：2014-05-16 浏览次数：20468 次
jqgrid学习记录，从外部url获取json数据
从http://a3mao.iteye.com学习，自己做了个简单的例子，mark下，以后方便查找
1.前台显示页面，包含了配置的完整注释
2.生成数据的jsp
从http://a3mao.iteye.com学习，自己做了个简单的例子，mark下，以后方便查找
1.前台显示页面，包含了配置的完整注释
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="/scripts/jQuery/jquery-1.3.2.js" type="text/javascript"></script>
<link 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" />
<script type="text/javascript" src="/scripts/jQuery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/scripts/jQuery/plugins/grid.locale-zh_CN.js"></script>
<script type="text/javascript" src="/scripts/jQuery/plugins/jquery.jqGrid.min.js"></script>
<style>
<!-- jquery-ui的字体大小与jqgrid字体大小不一致，故需要在页面上在加此style来指定页面上文字大小 -->
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#jsonTable").jqGrid({ //jsonTable为页面中需要显示内容的table的id
url:'/study/json-data.jsp', //生成json数据的url源
datatype: 'json', //从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
colNames:['编号','姓名','密码','年龄','地址','出生日期'], //表格的显示字段
colModel:[
{name:'id',index:'id', width:90,sorttype:"int"}, //name表格列的名称,index排序时字段的索引,width只能是像素，不能是百分比
{name:'username',index:'name', width:110,sorttype:"int"},
{name:'password',index:'password', width:80},
{name:'age',index:'age', width:80},
{name:'address',index:'address', width:80},
{name:'time',index:'time', width:80,sorttype:"date"}
],
rowNum:10, //在grid上显示记录条数，也就是pageSize，这个参数是要被传递到后台
rowList:[10,20,30], //用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
pager: "datapager", //datapager为显示页码的div
multiselect: false, //是否可多选，多选的话前面有多选框
sortname: 'id', //默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台
viewrecords: true, //是否显示记录总数
sortorder: "desc",
cellEdit:false, //是否可以编辑表格
lastpage:20, //
caption: "第一个表格", //表格名称
height: 220,
jsonReader: { //jsonReader来跟服务器端返回的数据做对应
root: "dataRows", //包含实际数据的数组
page: "currPage", //当前页
total: "totalPage",//总页数
records:"totalCount", //查询出的记录数
repeatitems : false
},
onSelectRow: function(id){
alert("第"+id+"行被选中");
},
onPaging:function(){
alert("翻页键被按下");
}
}).navGrid('datapager',
{view:true,edit:true,add:false,del:false},
{closeOnEscape:true}
);
});
</script>
</head>
<body>
<table id="jsonTable"></table>
<div id="datapager"></div>
</body>
</html>
2.生成数据的jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
StringBuffer sb=new StringBuffer();
sb.append("{totalPage:18,currPage:3,totalCount:300,'dataRows':[{'password':'123','age':20,'address':'USA','username':'王三','id':0},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':11},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':21,'address':'USA','username':'王三','id':1},{'password':'123','age':22,'address':'USA','username':'王三','id':2},{'password':'123','age':22,
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
