jQuery之jqGrid表格插件

发布日期:2010-02-25 21:41:53.0 发布讲师:don 浏览量:1115

课程类别:IT电脑开发
学习标签: jquery jqGrid .NET jsp servlet 表格插件
免费在线正则表达式验证工具！免费在线HTML/JS/CSS调试工具！

最近流行的JQGrid似乎不错，最近也没什么事，也就来学习学习了，可看了好多的相关这方面的资料，就是很少有实际的。NET环境中的文章，于是我自己来交流一下心得。运行界面:

我在这两天的学习中发现了应当注意的问题，希望对使用。NET的人有些帮助。目前的最新版本是3。5了，可以直接在官网下载

第一个问题是，css及JS文件夹的正确引用

<script src="js/jquery.js" type="text/javascript"></script>(1)
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>(2)
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>(3)

cs:大家知道如果jquery他自己有着丰富美丽的UI，所以这里的CSS如果引用不正确，当然页面是无法看到的

js:JS的引用它有个先后顺序问题，不信你可以把上面的jquery.jqGrid.min.js放入第一行试试

呵呵，以上两点是我在实际学习时遇到的，希望对新手们有个帮助，当然高手就无须我多言啦!

JS脚本:

                                         { name: 'iUSERID', index: 'iUSERID', width: 30 },
                                            { name: 'sUserName', index: 'sUserName', width: 100 },

                                            { name: 'sQuestion', index: 'sQuestion', width: 300 },

                                            { name: 'dtLastLoginTime', index: 'dtLastLoginTime', width: 120 },

                                          ],//这里是数据读取到的字段列名
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: jQuery('#pager'),
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption: "JQGridDemo"
        }).navGrid("#pager", { edit: false, add: false, del: false });

</script>

这个脚本如果是放在BODY中可以这么写，

如果你是放入<HEAD>标签中的，那么请在开始部分加入jQuery(document).ready(function(){...上面的脚本块});

下面要说的是关键，也就是数据的来源，我是采用的JSON对象，这里我是通过后台写了一个函数，将数据库中的数据读取出来转成JSON格式,具体的请看下面的整个工程文件

游览页面:Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQGridDemo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <link href="css/CRselectBox.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
    <br />
    <br />
    <table id="list" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" style="text-align: center;">
    </div>
    <br />
    <script type="text/javascript">
        jQuery("#list").jqGrid({
        url: 'GridData.ashx',//地址文件
            datatype: "json",
            colNames: ['用户ID', '登陆名', '描述', '最后登陆时间'],//这里是显示的数据库表的字段名称
            colModel: [

</script>

</body>
</html>
数据处理的后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Runtime.Serialization.Json;
using System.Web.Script.Serialization;
using SnailGame.DBUtility;
namespace JQGridDemo
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class GridData : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Buffer = true;
            context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            context.Response.AddHeader("pragma", "no-cache");
            context.Response.AddHeader("cache-control", "");
            context.Response.CacheControl = "no-cache";

//定义数据记取的字符串，这里我是用的SQLHELPER直接读的

//数据表的你可以随便建立

string strSql = "SELECT iUSERID,sUserName,sQuestion,dtLastLoginTime FROM Sys_Users";

           //数据存入一个DATATABLE
            DataTable dt = SqlServerHelper.Query(strSql).Tables[0];//读取数据
            JavaScriptSerializer serializer = new JavaScriptSerializer();

//转成json数据,这里是关键的函数此方法我是放入的一个JSON操作类中的

            string jsonData = JsonHandle.GetJson(dt);

            context.Response.Write(jsonData);//返回json数据

//反正数据读取一块自己定义
}

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
JSonHandle类:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Data;
using System.Collections;

using System.ServiceModel.Web;
namespace JQGridDemo
{
    public class JsonHandle
    {
        public JsonHandle() { }

        public static string GetJson(DataTable dt)
        {
            StringBuilder jsonBuilder = new StringBuilder();
            //jsonBuilder.Append("\"");
            jsonBuilder.Append("{\"page\":1,\"total\":" + dt.Rows.Count + ",\"records\":" + dt.Rows.Count + ",\"rows\"");
            jsonBuilder.Append(":[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{\"id\":" + dt.Rows[i]["iUSERID"].ToString() + ",\"cell\":[");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    //jsonBuilder.Append("\"");
                    //jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString());
                    jsonBuilder.Append("\",");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("]},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]");
            jsonBuilder.Append("}");
            return jsonBuilder.ToString();
        }
    }
}
只要你的数据读取部分能正常读取，那么页面就可以正常显示

/********************以上只是简单的显示页面，下面说说排序，分页内容

那么JQgrid呢已经默认帮我们作好了这些排序，分页的处理，我们只需加以调用即可。如

完成排序功能，只需要在你后台代码的数据读取部分加上相应的参数就OK，我的方法是一个

GetList(string strWhere,strOrder,string sortType)//1sql where条件,2排序字段，3排序类型

参数我也不用多说，这个方法是我做DEMO时作的。你也可以试。那么怎么获取JQGrid的这些默认字段呢，只要你以正常方式获取

Request.Params["sidx"]这是获取要排序的字段

Request.params["sord"]这是以哪种方式（ASC，DESC）排,以上的排序即可完成

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、效果图：

这个跟第一个Demo看起来没有什么区别。的确没啥区别。只是这次的数据是从服务器端获取的。

2、代码及解释

HTML代码：

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” 博客