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

jqgrid学习记要从外部url获取json数据 jqgrid学习，从外部url获取json数据 从学习，自己做了个简单的例子，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 1 楼 wlsuger 2012-06-13 你好，感谢分享，但是你发的例子怎么跑不起来呢 报44行错误 2 楼 mushme 2012-06-13 wlsuger 写道 你好，感谢分享，但是你发的例子怎么跑不起来呢 报44行错误 此内容包含的js引用较多，代码是可用的，我再找找源文件，打包上来。 3 楼 mushme 2012-07-01 mushme 写道 wlsuger 写道 你好，感谢分享，但是你发的例子怎么跑不起来呢 报44行错误 此内容包含的js引用较多，代码是可用的，我再找找源文件，打包上来。 整个项目已经打包上传到附件，可以直接导入eclipse中使用。