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

mushme

浏览: 796101 次
性别:
来自: 西安

最近访客更多访客>>

mumume123

sker

odpsoft

西红柿炒笨蛋

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript相关

json jQuery JSP HTML UI

从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

jqGrid.zip (4.3 MB)
下载次数: 194

分享到：

myeclipse无法编译java源文件 | jqgrid做表格

2011-01-21 13:39
浏览 14870
评论(3)
分类:Web前端
查看更多

3 楼 mushme 2012-07-01

mushme 写道

wlsuger 写道

你好，感谢分享，但是你发的例子怎么跑不起来呢报44行错误

此内容包含的js引用较多，代码是可用的，我再找找源文件，打包上来。

整个项目已经打包上传到附件，可以直接导入eclipse中使用。

2 楼 mushme 2012-06-13

wlsuger 写道

你好，感谢分享，但是你发的例子怎么跑不起来呢报44行错误

此内容包含的js引用较多，代码是可用的，我再找找源文件，打包上来。

1 楼 wlsuger 2012-06-13

你好，感谢分享，但是你发的例子怎么跑不起来呢报44行错误

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

zhihu图片无法显示问题插件

makr一个base64编码和解码的js

jrcode生成二维码

根据数字生成一维码

jQuery MsgBox Plugin[转]

jqgrid属性只colmodel

批量设置输入框的只读属性

表单验证，在每一个有requred类的文本框后加入“*”以提示必填项

加载Google cdn jQuery库

获取鼠标当前位置的js

原生态的js map

jqgrid数据转换

jquery只允许输入整数

生成表单json字串

jqgrid做表格

强大的jquery验证框架

复制内容的js，通过json来实现

js表格求和

form嵌套问题

复制粘贴的js

最近访客更多访客>>