jqgrid学习记录，从外部url获取json数据

最新推荐文章于 2023-11-15 16:03:12 发布

mush_me

最新推荐文章于 2023-11-15 16:03:12 发布

阅读量874

点赞数

分类专栏： javascript相关文章标签： json jQuery JSP HTML UI ViewUI

本文链接：https://blog.csdn.net/mush_me/article/details/83815174

版权

javascript相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

从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,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':12},{'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,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':13},{'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,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':14},{'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,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':15},{'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,'address':'USA','username':'王三','id':2}");
sb.append(",{'password':'123','age':21,'address':'USA','username':'王三','id':16},{'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,'address':'USA','username':'王三','id':2}");

sb.append("],'rows':10}");
out.print(sb.toString());
%>

jsonreader的几处关键配置说明，注释中已经标识，此处再说明下


jsonReader: {    //jsonReader来跟服务器端返回的数据做对应
	root: "dataRows",  //包含实际数据的数组
	page: "currPage",  //当前页
	total: "totalPage",//总页数
	records:"totalCount", //查询出的记录数
	repeatitems : false    
}

整个项目已经打包上传到附件。时间：20120701
内容已更新，时间：20120710