问题描述
环境:Eclipse+Tomcat+servlet+jsp首先新建一个DynamicWebProject项目web.xml配置如下:<?xmlversion="1.0"encoding="UTF-8"?><web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="WebApp_ID"version="2.5"><servlet><servlet-name>DataServlet</servlet-name><servlet-class>com.taiji.jqGrid.DataServlet</servlet-class></servlet><servlet-mapping><servlet-name>DataServlet</servlet-name><url-pattern>/DataServlet</url-pattern></servlet-mapping></web-app>zjsp.jsp编写如下:<%@pagelanguage="java"import="java.util.*"pageEncoding="gbk"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>第一个jqGrid!</title><linkid="uiThemes"rel="stylesheet"type="text/css"media="screen"href="styles/themes/redmond/jquery-ui-1.7.2.custom.css"/><linkrel="stylesheet"type="text/css"media="screen"href="styles/themes/ui.jqgrid.css"/><!--引入jQuery--><scripttype="text/javascript"src="scripts/jQuery/jquery-1.3.2.js"></script><scriptsrc="scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js"type="text/javascript"></script><scriptsrc="scripts/jQuery/plugins/grid.locale-zh_CN.js"type="text/javascript"></script><scriptsrc="scripts/jQuery/plugins/jquery.jqGrid.min.js"type="text/javascript"></script><style>html,body{margin:0;padding:0;font-size:75%;}</style><scripttype="text/javascript">jQuery(document).ready(function(){jQuery("#list1").jqGrid({//jqGrid固定的写法:jQuery("#list").jqGrid({参数})datatype:"json",//将这里改为使用JSON数据url:"DataServlet",//这是Action的请求地址mtype:"get",//提交类型height:250,//表格高度width:1000,//表格宽度//表格结构定义colNames:["编号","Date","Client","Amount","Tax","Total","Notes"],colModel:[{name:"id",index:"id",width:60,sorttype:"int"},{name:"invdate",index:"invdate",width:90,sorttype:"date"},{name:"name",index:"name",width:100},{name:"amount",index:"amount",width:80,align:"right",sorttype:"float"},{name:"tax",index:"tax",width:80,align:"right",sorttype:"float"},{name:"total",index:"total",width:80,align:"right",sorttype:"float"},{name:"note",index:"note",width:150,sortable:false}],jsonReader:{root:"rows",page:"page",total:"total",records:"records",repeatitems:false},pager:"#pager",//分页工具栏imgpath:"themes/redmond/images",//图片路径rowNum:10,//每页显示记录数viewrecords:true,//是否显示行数rowList:[10,20,30],//可调整每页显示的记录数multiselect:false,//是否支持多选sortname:"id",//根据哪个字段排序caption:"jqGrid表格测试",//表格标题recordtext:"记录{0}-{1}总记录数{2}",//显示记录数的格式emptyrecords:"无数据",//空记录时的提示信息loadtext:"获取数据中...",//获得数据时的提示信息pgtext:"第几页{0}总页数{1}"//页数显示格式});//定义默认按键的显示,refresh刷新按钮是否显示、edit编辑按钮是否显示、add添加按钮是否显示、del删除按钮是否显示、refreshtitle刷新按钮提示信息$('#list1').navGrid('#nav',{refresh:true,edit:true,add:true,del:true,search:true,refreshtitle:"刷新",edittitle:"修改",addtitle:"添加",deltitle:"删除",searchtitle:"搜索"});});</script></head><body><!--调用表格并分页--><tablewidth="600"height="500"border="0"cellpadding="0"cellspacing="0"align="center"><tr><td><tableid="list1"></table><divid="pager"></div></td></tr></table></body></html>然后是后台java文件:publicclassDataServletextendsHttpServlet{/****/privatestaticfinallongserialVersionUID=1L;publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException,ServletException{Stringpage="1";Stringrows="1";page=request.getParameter("page");rows=request.getParameter("rows");if(page==null){page="1";}if(rows==null){rows="2";}System.out.println("page:"+page+"rows:"+rows);inttotalRecord=12;//总记录数(应根据数据库取得,在此只是模拟)inttotalPage=totalRecord%Integer.parseInt(rows)==0?totalRecord/Integer.parseInt(rows):totalRecord/Integer.parseInt(rows)+1;//计算总页数try{intindex=(Integer.parseInt(page)-1)*Integer.parseInt(rows);//开始记录数0intpageSize=Integer.parseInt(rows);//2//以下模拟构造JSON数据对象,该对象是jqgrid的默认返回对象Stringjson="{total:"+totalPage+",page:"+page+",records:"+totalRecord+",rows:[";for(inti=index;i<pageSize+index&&i<totalRecord;i++){json+="{'id':'"+i+"','invdate':'"+i+"','name':'"+i+"','amount':'"+i+"','tax':'"+i+"','total':'"+i+"','note':'"+i+"'}";if(i!=pageSize+index-1&&i!=totalRecord-1){json+=",";}}json+="]}";System.out.println(json);response.getWriter().write(json);//将JSON数据返回页面}catch(Exceptionex){}}地址访问jsp的时候,去调用jsp页面的js.js请求地址/DataServlet。通过web.xml配置会找到相应的类,做数据的处理。然后把处理的结果以json的形式返回到页面。
解决方案
解决方案二:
该回复于2012-07-20 10:56:51被版主删除
解决方案三:
该回复于2012-07-20 10:56:56被版主删除
解决方案四:
数据怎么都不显示啊
解决方案五:
什么不显示?我这个例子?
解决方案六:
分享案例???看起来不错
解决方案七:
请问楼主,跨页多选怎么处理呀?当前测试获取的多选记录为当前页所选取的记录,其它分页所选中的无效;
解决方案八:
请参考jqGrid中文demo:http://blog.mn886.net/jqGrid/
解决方案九:
完全不显示啊!不知道为什么
解决方案十:
楼主,不显示数据呀,,