JQuery-Grid，服务端取数

zengshaotao

浏览: 786802 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery
JQuery-Grid

jqGrid支持多种数据类型，但比较多的是JSON。开发中我们可能会见到{}构造json数据的代码，比较繁琐。如果采用了json-lib，操作比较简单，因为操作的都是java对象，只是操作对象时需要按照格式即可。在工程里要使用该功能，就需要使用json-lib.jar，下载地址：http://json-lib.sourceforge.net/

页面：

前端初始化脚本：

$(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 //jsonReader:{repeatitems : false}则是为了后台处理数据方便而设置
                },
                pager:"#gridPager",
                caption: "jqGrid与Servlet集成"
}).navGrid('#gridPager',{edit:false,add:false,del:false});
})

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文件里进行配置

分享到：

嵌入百度搜索 | JQuery之extend()

2013-01-15 22:18
浏览 1031
评论(0)
分类:企业架构
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论