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之旅吧。

一、效果圖：

這個跟第一個Demo看起來沒有什麼區別。的確沒啥區別。只是此次的數據是從服務器端獲取的。

 

二、代碼及解釋

 

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的配置

 

三、部署運行

導入必須的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文章結尾下載個人例子代碼。