开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery学习之:jqGrid表格插件——从servlet获得数据

简介:
+关注继续查看
在我的jqGrid第一个demo中,没有涉及到任何与服务端的交互:数据是从自己定义的一个固定数组中得到的。当然,实际应用中不可能会这么做。在 jqGrid官方网站上提供的demo,服务器端全部是PHP,在网上找了很久,也没有找到写的完整详细的从JSP/Servlet获得数据的例子。下面是我写的一个从Servlet获得数据的例子,希望对初学者有点帮助。 
jqGrid支持的好几种数据类型,现在使用比较多的是JSON。本文中也采用这种数据类型。另外,本文使用了json-lib,因而您也需要下载json-lib.jar,可以到http://json-lib.sourceforge.net/上下载,且该网站上有关于json-lib的详细介绍与使用。感兴趣的可以阅读。

下面开始我们的jqGrid与Servlet之旅吧。
1、效果图:
deae8ece-134d-390f-a478-5ecc8c2e02e1
这个跟第一个Demo看起来没有什么区别。的确没啥区别。只是这次的数据是从服务器端获取的。
 
2、代码及解释
 
HTML代码:
<body>
         <table id="gridTable"></table>
         <div id="gridPager"></div>
</body>
html代码跟之前一样,很简单。
 
JavaScript代码:
$(function()
{
        $("#gridTable").jqGrid({
                url:'jqGridServlet',
                datatype: "json",
                height: 250,
                colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
                colModel:[
                        {name:'id',index:'id', sorttype:"int"},
                        {name:'userName',index:'userName',
                        {name:'gender',index:'gender',
                        {name:'email',index:'email', ;string"},
                        {name:'QQ',index:'QQ', ;            
                        {name:'mobilePhone',index:'mobilePhone', ;            
                        {name:'birthday',index:'birthday', sorttype:"date"}
                ],
                sortname:'id',
                sortorder:'asc',
                viewrecords:true,
                rowNum:10,
                rowList:[10,20,30],
                jsonReader:{
                        repeatitems : false
                },
                pager:"#gridPager",
                caption: "jqGrid与Servlet集成"
        }).navGrid('#gridPager',{edit:false,add:false,del:false});
})
JavaScript的代码跟之前有几个地方不一样。其中,url:'jqGridServlet'的jqGridServlet是Servlet的 url-pattern;datatype: "json"表示服务器端需要返回json数据;jsonReader:{repeatitems : false}则是为了后台处理数据方便而设置,具体意思见下面Java代码的注释。
 
Java代码:
package com.polaris.jqgrid.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/**
* 该Servlet向客户端返回一个json对象。为了简便,数据不是从数据库获得的。
* jqGrid默认期望返回的json对象格式要求如下:
* {"page":"1","total":"2","records":"13",
* "rows":[
*                 {id:"1",cell:["1","polaris","男","polaris@gmail.com","772618379","18329382732","1985-10-2"]},
*                 {id:"2",cell:["2","张三","女","zhangsan@163.com","272618382","15329382732","1986-10-12"]},
*                 {id:"3",cell:["3","王五","女","wangwu@yahoo.com","172635372","13329389832","1987-12-21"]},
*                 {id:"4",cell:["4","赵六","男","zhaoliu@sina.com","372618332","18929343731","1988-09-22"]}
*         ]
* }
* 当然,在js中,可以通过jqGrid的jsonReader属性来修改默认格式
* 因为默认的格式,rows的数据要求顺序不能变,且每个字段都得有值(空也得有"")。因而,
* 在jsonReader中定义repeatitems : false。这样,rows就变成了:
* "rows":[
*                 {id:"1",userName:"polaris",gender:" 男",email:"polaris@gmail.com",QQ:"772618379",mobilePhone:"18329382732",birthday:"1985-10-2"]},
*                 {id:"2",userName:"徐新华",gender:" 男",email:"xh.xu@163.com",QQ:"272618382",mobilePhone:"15329382732",birthday:"1986-10-12"]},
*                 {id:"3",userName:"王五",gender:" 女",email:"wangwu@yahoo.com",QQ:"172635372",mobilePhone:"13329389832",birthday:"1987-12-21"]},
*                 {id:"4",userName:"赵六",gender:" 女",email:"zhaoliu@sina.com",QQ:"372618332",mobilePhone:"18929343731",birthday:"1988-09-22"]}
*         ]
* @author xuxinhua
*
*/

public class JqGridForJSONServlet extends HttpServlet
{
        private static final long serialVersionUID = 132383828833L;

        @Override
        public void doGet(HttpServletRequest req, HttpServletResponse resp)
                        throws ServletException, IOException {
                // 定义返回的数据类型:json,使用了json-lib
                JSONObject jsonObj = new JSONObject();
                // 根据jqGrid对JSON的数据格式要求给jsonObj赋值
                jsonObj.put("page", 1);                // 当前页
                jsonObj.put("total", 1);        // 总页数
                jsonObj.put("records", 4);        // 总记录数
                // 定义rows,存放数据
                JSONArray rows = new JSONArray();
                // 放入4条数据
                for(int i=0;i<4;i++)
                {
                        // 存放一条记录的对象
                        JSONObject cell = new JSONObject();
                        cell.put("id", i);
                        if(i%2==0)
                        {
                                cell.put("userName""polaris");
                                cell.put("gender""女");
                        }
                        else
                        {
                                cell.put("userName""徐新华");
                                cell.put("gender""男");
                        }
                        cell.put("email""polaris@gmail.com");
                        cell.put("QQ""772"+i+"1837"+i);
                        cell.put("mobilePhone""132"+i+"1837"+i+"3"+i);
                        cell.put("birthday""198"+i+"-10-"+"1"+i);
                        // 将该记录放入rows中
                        rows.add(cell);
                }
                // 将rows放入json对象中
                jsonObj.put("rows", rows);
                // 自控制台打印输出,以检验json对象生成是否正确
                System.out.println("要返回的json对象:\n" + jsonObj.toString());
                // 设置字符编码
                resp.setCharacterEncoding("UTF-8");
                // 返回json对象(通过PrintWriter输出)
                resp.getWriter().print(jsonObj);
        }
        @Override
        public void doPost(HttpServletRequest req, HttpServletResponse resp)
                        throws ServletException, IOException {
                doGet(req,resp);
        }
}

请注意看该类的详细注释。

web.xml
<servlet>
            <servlet-name>jqGridServletForJson</servlet-name>
            <servlet-class>com.polaris.jqgrid.servlet.JqGridForJSONServlet</servlet-class>
</servlet>
<servlet-mapping>
            <servlet-name>jqGridServletForJson</servlet-name>
            <url-pattern>/jqGridServlet</url-pattern>
</servlet-mapping>
web.xml中Servlet的配置
 
3、部署运行

导入必须的Jar包(记得导入json-lib依赖的jar包)。将工程打包部署到tomcat下,运行tomcat,在浏览器中访问写的jsp 页面,如:http://localhost:8080/jqGrid/jqGrid_servlet.jsp,回车会出现效果图的效果。
 
总结: 

可以看出,jqGrid集成Servlet还是很简单的,就jqGrid而言,它只需要请求一个Servlet,并设置期望返回的数据类型即可。而对于Servlet而言,这需要根据jqGrid期望返回的数据类型而定,通常都会选择json数据格式,因而,Servlet主要就是构造json数据,我们可以根据json的语法要求构建,然而,那样比较繁琐,会有很多的“{}"之类的,且不清晰,容易出错。而json-lib则是一个不错的选择,因为这时操作的只是Java对象,构建json很容易,结构清晰不容易出错。因而推荐采用。 
如有问题,请留言;写的不好的还请指正。敬请期待jqGrid与struts2的集成。
 
由于很多人问我要例子的源代码,polaris也都发给了大家,然而有时候很晚才看到,发的会有点晚。鉴于此,特提供下载polaris的jqGrid的例子代码,谢谢大家的支持!
 
可以到:http://www.beijixing001.com/?p=406文章结尾下载我的例子代码。



     本文转自polaris1119 51CTO博客,原文链接:http://blog.51cto.com/polaris/264340,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行   合并的方法 $("#tableid").mergeCell({  cols:[X,X] ///参数为要合并的列}) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.p
1174 0
JQuery操作一个表格简单示例
jquery操作table的一个简单示例,仅做参考,具体可以根据原javascript操作table的操作更改为jquery操作方式。 .mainTable{ background-color:#ffcc00; width:85%; margin:auto; font-size:12px} .
737 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1225 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1061 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
898 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1338 0
【推荐】用于UI和表单设计的10款jQuery插件
本文搜集了一些有用的用户界面和架构设计工具。包含架构验证器、文件上传以及UI工具包。 1.A Better Form 这款插件有助于清除垃圾评论、垃圾邮件和自动提交表单。 在线演示 2.3 State Switch Plugin 此款插件可切换至三种状态。
1324 0
推荐11款jQuery的复选框和单选框美化插件
英文出处: jQuery Plugins for Styling Checkbox & Radio Buttons
782 0
9款jQuery插件为你的网站增加亮点
jQuery现在已经有一统ajax框架的趋势,或许日后将成为ajax的标准框架也难说。本文向你推荐9款jQuery插件,使用这些插件可使你的网站增色不少。 开始吧! 1.Sticky Sidebar:当页面向下滚动时,右边的购物车信息是跟着往下滚动的,像新浪微博的新粉丝提示,非常好。
745 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载