第一个完整的jqGrid例子。

问题描述

环境: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/
解决方案九:
完全不显示啊!不知道为什么
解决方案十:
楼主,不显示数据呀,,

时间: 2024-12-21 19:17:06

第一个完整的jqGrid例子。的相关文章

深入浅出cassandra 2 第一个可以运行的例子

/**    * author: ahuaxuan(张荣华)    * date 2010-2-25    */ 深入浅出cassandra 2 第一个可以运行的例子 在上一篇文章中,我们成功的建立了一个可以cassandra的实例,同时也让它成功的运行起来,下面的工作就是让我们来简单的操作一下这个 号称分布式的号称第二代的数据库系统.   本文主要关注两个部分, 1. 怎么写一个最简单cassandra的sample 2. 怎么去分析这个最简单的sample背后隐含的含义 步骤一: 首先我们创

用VS2013编译opengl编程宝典第五版的第一个画三角形的例子,编译后程序运行不了

问题描述 用VS2013编译opengl编程宝典第五版的第一个画三角形的例子,编译后程序运行不了 代码如下: #include #include #define FERRGLUT_STATIC #include #include GLBatch trianglebatch; GLShaderManager shadermanager; int main(int argc, char* argv[]) { void RenderScene(); void ChangeSize(int w, int

PHP中比较两个字符串找出第一个不同字符位置例子

 这是一个在stackoverflow上的问题. 给出两个长度相等的字符串,找出这两个字符串中第一个不同的字符位置. 一般的做法就会这样:    代码如下: <?php for ($offset = 0; $offset < $length; ++$offset) {     if ($str1[$offset] !== $str2[$offset]) {         return $offset;     } } 而问题下面给出的最佳答案是用异或操作符( ^ ),以前从来没用过这个操作符

PHP中比较两个字符串找出第一个不同字符位置例子_php实例

一般的做法就会这样: 复制代码 代码如下: <?phpfor ($offset = 0; $offset < $length; ++$offset) {    if ($str1[$offset] !== $str2[$offset]) {        return $offset;    }} 而问题下面给出的最佳答案是用异或操作符( ^ ),以前从来没用过这个操作符,也不知道能用到什么地方,今天算是学到. 因为一般情况下,当你对两个字符串进行异或操作的时候,相同的字符的异或结果是null

Android RoboGuice使用指南(2) 第一个例子Hello World

首先介绍一下如果将Guice 和RoboGuice 的库添加到项目中. 下载RoboGuice和guice-2.0-no_aop.jar(not guice-3.0),或者下载 创建一个新Android项目,比如GuiceDemo,目标平台Android1.5以上. 一般可以在该项目下添加一个lib目录,将两个jar文件拷到lib目录下,然后 通过: Project > Properties > Java Build Path > Libraries > Add External

Android RoboGuice2使用指南(2) 第一个例子Hello World

本例实现的功能和例子Android RoboGuice 使用指南(2):第一个例子Hello World一样,所不同的是本例使用RoboGuice2.0 来实现. 下载新的RoboGuice库,Roboguice2.0 库有四个库组成,如下图所示: 库可以从 http://code.google.com/p/roboguice/下载. 2. 创建一个新Android项目,比如GuiceDemo,目标平台Android1.5以上. 3. 一般可以在该项目下添加一个libs目录,将两个jar文件拷到

MyBatis底层基础和拦截器 - 第一部分

MyBatis底层基础和拦截器 - 第一部分 第一部分包含了下面代码的基本讲解和下面代码与XML配置关系和作用的讲解. 这一部分是了解后续拦截器和SqlSource的重要基础. 本视频不仅对深入学习MyBatis有用,对于一般的MyBatis使用也能加深理解. 第一部分完整视频+源文件+PPT下载地址:http://pan.baidu.com/s/1mgzZnx2 在第一部分视频后,还有一些和MyBatis相关问答的一些视频,这些视频可以从群共享下载. 另外想看第三遍讲解的各位还有看直播的机会,

php中的curl_multi系列函数使用例子_php实例

相信许多人对php手册中语焉不详的curl_multi一族的函数头疼不已,它们文档少,给的例子 更是简单的让你无从借鉴,我也曾经找了许多网页,都没见一个完整的应用例子. curl_multi_add_handle curl_multi_close curl_multi_exec curl_multi_getcontent curl_multi_info_read curl_multi_init curl_multi_remove_handle curl_multi_select 一般来说,想到要

Python系列教材第一集

            Python 新员工教材     楚广明2012                                     借用了一些闫小勇\郑纳智同志的文档,向同志们致敬!     目录 一.         Python概述. 5 1)             第一个Python程序. 6 1.             为什么要学习Python 7 2.             代码块与缩进的差异. 8 3.             语句结尾的差异. 8 4.