jqGrid學習

時間 2019-11-11

標籤 jqgrid 學習简体版

原文原文鏈接

jqGrid: 是一個用於處理表格的 jquery插件, 它可以處理json/xml..等格式數據, 實現高效的獲取數據,支持了幾乎全部的表格操做，如分頁，排序,增長,修改，刪除等，這些事件在jqgrid中都被封裝成了事件.javascript

下面是我安裝維基百科官方文檔寫的一個demo, 後臺: servlet模擬出幾組json數據, 將java集合轉爲json用到了 json-lib 前臺:jspphp

第一步: 搭建環境css

1. 官網下載jqGrid (本例用的版本是: jqGrid4.5.2) 同時須要下載jquery-ui插件(jquery-ui-1.9.2.custom.zip)html

2. 建立web project 在webroot下建立js和css文件夾java

3. 解壓縮 jquery-ui-1.9.2.custom.zip ,拷貝該目錄下/css/smoothness目錄到webroot/css下 jquery

4.解壓縮jqGrid4.5.2 將該目錄下/css/ui.jqgrid.css 拷貝到webroot/css下, 同時拷貝該目錄下/js/下全部文件到webroot/js下web

5.搭建servlet環境, 用到了json-lib包 (用於將java對象轉爲json)數據庫

搭建後目錄結果以下圖：json

第二步: 在webroot下新建一個Jsp/html 頁面:瀏覽器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyFirstGrid.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"  media="screen"  href="css/smoothness/jquery-ui-1.9.2.custom.css">
     <link rel="stylesheet" type="text/css"  media="screen"  href="css/ui.jqgrid.css">
     <style>
            html, body {
            margin: 0;
            padding: 0;
            font-size: 75%;
        }
     </style>
       <script src="js/jquery-1.9.0.min.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>
        <script type="text/javascript">
            $(function () {
            $("#list").jqGrid({
                url: "quoto.do",     //請求的servlet地址.
                datatype: "json",　　　//設置數據類型
                mtype: "GET",
                colNames: ["InvNo", "Date", "Amount", "Tax", "Total", "Notes"], //表格的列名
                colModel: [
                    { name: "invid", width: 55 },
                    { name: "invdate", width: 90 },
                    { name: "amount", width: 80, align: "right" },
                    { name: "tax", width: 80, align: "right" },
                    { name: "total", width: 80, align: "right" },
                    { name: "note", width: 150, sortable: false }
                ],
                pager: "#pager",     //分頁div
                rowNum: 10,　　　　　　
                rowList: [10, 20, 30],  
                sortname: "invid",
                sortorder: "desc",
                viewrecords: true,
                gridview: true,
                autoencode: true,
　　　　　　　　　 jsonReader:{
                        root: "rows",                //json數據模型入口
                        page:"page",                //當前頁碼
                        total:"total",             //數據總頁碼
                        records: "records",       //數據總記錄數
                        repeatitems : false     //若是設爲false，則jqGrid在解析json時，會根據name(colmodel 指定的name)來搜索對應的數據元素（便可以json中元素能夠不按順序）
                },
                caption: "My first grid"
            }); 
}); 
        </script>
  </head>
  <body>
  <h2><a href="loginAction_doAction">ClickMe</a></h2>
     <table id="list">
            <tr><td></td></tr>
    </table> 
    <div id="pager"></div> 
  </body>
</html>

第三步: 編寫servlet類

package com.chinaimport java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

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;

import com.speed.entity.InvHeader;
/*這個類其實就是模擬出幾組json數據，返回客戶端,沒有到數據庫中去取數據*/
public class InvHeadServlet extends HttpServlet
{
    public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String uri = request.getRequestURI();
        String action =  uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
            
        if(action.equals("/quoto"))
        {
            JSONObject jsonObj = new JSONObject();
            // 根據jqGrid對JSON的數據格式要求給jsonObj賦值
            jsonObj.put("page", 1);                // 當前頁
            jsonObj.put("total", 1);        // 總頁數
            jsonObj.put("records", 4);        // 總記錄數
            // 定義rows，存放數據
            JSONArray rows = new JSONArray();
            for(int i=0;i<4;i++)
            {
                  // 存放一條記錄的對象
                JSONObject cell = new JSONObject();
                Date date = new Date();
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-mm-dd");
                sdf.format(date);
                cell.put("invid",i);
                cell.put("invdate", "ssss");
                cell.put("amount", "200"+i);
                cell.put("tax","500" );
                cell.put("total", "1000");
                cell.put("note", "tttt");
                // 將該記錄放入rows中
                rows.add(cell);
            }
            // 將rows放入json對象中
            jsonObj.put("rows", rows);
      //{"page":1,"total":1,"records":4,"rows":[{"invid":0,"invdate":"ssss","amount":"2000","tax":"500","total":"1000","note":"tttt"},{"invid":1,"invdate":"ssss","amount":"2001","tax":"500","total":"1000","note":"tttt"},{"invid":2,"invdate":"ssss","amount":"2002","tax":"500","total":"1000","note":"tttt"},{"invid":3,"invdate":"ssss","amount":"2003","tax":"500","total":"1000","note":"tttt"}]}
            System.out.println("返回的數據：\n" + jsonObj.toString());
            out.print(jsonObj.toString());
        }
    }

}

第四步驟：部署到tomcat, 啓動瀏覽器訪問： http://localhost:8080/jqGridTest/MyFirstGrid.jsp 既能夠看到下面效果:

到此第一個demo就完成了,我的認爲這個插件強大之處就在於對錶格的處理, 根據你的需求對指定列進行排序,行行之間的比較等,接下來幾天仍是要繼續研究該插件.

學習中參考到的資料:

jqgrid參數方法API講解http://mj4d.iteye.com/blog/1628851jqgrid API-( event/method)http://www.trirand.com/jqgridwiki/doku.php?id=wiki:eventshttp://www.trirand.com/jqgridwiki/doku.php?id=wiki:methodsjqgrid JsonReader:http://www.cnblogs.com/linsu/archive/2013/01/26/2877753.html

相關標籤/搜索

jqgrid+webservice+linq

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。