`
tanlingcau
  • 浏览: 138028 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqGrid:四、 remote data(JSON)

阅读更多
页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>grid.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/themes/redmond/jquery-ui-1.8.2.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen"
            href="css/themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen"
            href="css/themes/ui.multiselect.css" />
        <link rel="stylesheet" type="text/css" media="screen"
            href="css/themes/jquery.searchFilter.css" />
        <style>
html,body {
    --margin: 0; /* Remove body margin/padding */
    padding: 0;
    overflow: hidden; /* Remove scroll bars on browser window */
    font-size: 75%;
}
</style>

        <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
        <script src="js/src/ui.multiselect.js"
            type="text/javascript"></script>
        <script src="js/src/grid.loader.js" type="text/javascript"></script>
        <script type="text/javascript">
            $.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
        </script>
        <script type="text/javascript">
            $(function(){ 
              $("#grid_id").jqGrid({
                url:'/demo2/servlet/JqGridJsonServlet',
                mtype: 'GET',
                datatype: 'json',
                jsonReader : {
                   repeatitems: false
                },
                height: "auto",
                loadui: "disable",
                colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
                colModel :[ 
                  {name:'invId', index:'invId', width:70}, 
                  {name:'invDate', index:'invDate', width:120, editable:true}, 
                  {name:'amount', index:'amount', width:90, align:'right', editable:true}, 
                  {name:'tax', index:'tax', width:90, align:'right', editable:true}, 
                  {name:'total', index:'total', width:90, align:'right', editable:true}, 
                  {name:'note', index:'note', width:180, sortable:false, editable:true} 
                ],
                pager: '#pager',
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'invid',
                sortorder: 'asc',
                viewrecords: true,
                caption: 'My first grid'
              });
            }); 
        </script>
    </head>
    <body>
        <table id="grid_id"></table>
        <div id="pager"></div>
    </body>
</html>

servlet
package com.qoma.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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

import org.apache.commons.lang.StringUtils;

import com.et.ar.exception.ActiveRecordException;
import com.qoma.db.vo.InvHeader;
import com.qoma.service.InvHeaderService;
import com.qoma.util.Json;

public class JqGridJsonServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1676458940650461673L;

    private InvHeaderService service = new InvHeaderService();

    /**
     * Constructor of the object.
     */
    public JqGridJsonServlet() {
        super();
    }

    /**
     * Destruction of the servlet. <br>
     */
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /**
     * The doGet method of the servlet. <br>
     * 
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request
     *            the request send by the client to the server
     * @param response
     *            the response send by the server to the client
     * @throws ServletException
     *             if an error occurred
     * @throws IOException
     *             if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    /**
     * The doPost method of the servlet. <br>
     * 
     * This method is called when a form has its tag value method equals to
     * post.
     * 
     * @param request
     *            the request send by the client to the server
     * @param response
     *            the response send by the server to the client
     * @throws ServletException
     *             if an error occurred
     * @throws IOException
     *             if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        String oper = request.getParameter("oper");
        String s = "";
        if (null == oper || "".equals(oper)) {
            Integer page = Integer.parseInt(request.getParameter("page"));
            Integer limit = Integer.parseInt(request.getParameter("rows"));
            String sidx = request.getParameter("sidx");
            String sord = request.getParameter("sord");
            if (null == sidx || "".equals(sidx))
                sidx = "1";

            Long count = 0L;
            try {
                count = service.getCount();
            } catch (ActiveRecordException e) {
                e.printStackTrace();
            }
            Integer totalPages = 0;
            if (count > 0 && limit > 0) {
                totalPages = new Long(count / limit).intValue();
                if (count % limit != 0) {
                    totalPages += 1;
                }
            } else {
                totalPages = 0;
            }

            // if for some reasons the requested page is greater than the total
            // set the requested page to total page
            if (page > totalPages)
                page = totalPages;

            // calculate the starting position of the rows
            Integer start = limit * page - limit;

            if (start < 0)
                start = 0;

            try {
                List<InvHeader> list = service.getLimitList(start, limit, sidx, sord);
                s = service.getAllJson(page, totalPages, count, list);
            } catch (ActiveRecordException e) {
                e.printStackTrace();
                s = Json.FAILURE;
            }
        } else {
            String idValue = request.getParameter("id");
            Integer invId = (StringUtils.isEmpty(idValue) || "_empty".equals(idValue)) ? 0 : Integer.parseInt(idValue);// add操作时,id值默认为_empty
            InvHeader vo = new InvHeader();
            vo.invId = invId;
            if ("del".equals(oper)) {
                try {
                    service.deleteInvHeader(vo);
                    s = Json.SUCCESS;
                } catch (ActiveRecordException e) {
                    e.printStackTrace();
                    s = Json.getFailure(e.getMessage());
                }
            } else {
                String invDateValue = request.getParameter("invDate");
                String clientIdValue = request.getParameter("client_Id");
                String amountValue = request.getParameter("amount");
                String taxValue = request.getParameter("tax");
                String totalValue = request.getParameter("total");
                String noteValue = request.getParameter("note");
                vo.invDate = invDateValue;
                vo.client_Id = StringUtils.isEmpty(clientIdValue) ? 0 : Integer.parseInt(clientIdValue);
                vo.amount = StringUtils.isEmpty(amountValue) ? 0 : Float.parseFloat(amountValue);
                vo.tax = StringUtils.isEmpty(taxValue) ? 0 : Float.parseFloat(taxValue);
                vo.total = StringUtils.isEmpty(totalValue) ? 0 : Float.parseFloat(totalValue);
                vo.note = noteValue;
                if ("add".equals(oper)) {
                    try {
                        if (service.addInvHeader(vo)) {
                            s = Json.SUCCESS;
                        } else {
                            s = Json.FAILURE;
                        }
                    } catch (ActiveRecordException e) {
                        e.printStackTrace();
                        s = Json.getFailure(e.getMessage());
                    }
                } else if ("edit".equals(oper)) {
                    try {
                        if (service.updateInvHeader(vo)) {
                            s = Json.SUCCESS;
                        } else {
                            s = Json.FAILURE;
                        }
                    } catch (ActiveRecordException e) {
                        e.printStackTrace();
                        s = Json.getFailure(e.getMessage());
                    }
                }
            }
        }

        out.println(s);
        out.flush();
        out.close();
    }

    /**
     * Initialization of the servlet. <br>
     * 
     * @throws ServletException
     *             if an error occurs
     */
    public void init() throws ServletException {
        // Put your code here
    }

}
  • lib.zip (1.1 MB)
  • 下载次数: 39
分享到:
评论

相关推荐

    jqGrid:六、 search

    **jqGrid:六、search** jqGrid是一款强大的jQuery插件,用于创建交互式的网格视图。在本章节中,我们将深入探讨jqGrid的搜索功能,它允许用户在数据网格中快速定位和过滤所需的信息。 首先,jqGrid的搜索功能提供...

    JqGrid 纯Json自带分页功能

    在这个场景中,我们将关注JqGrid如何利用纯JSON数据实现自动分页。 在Web开发中,分页是处理大量数据时非常重要的一个功能,它可以提升用户体验,避免一次性加载过多数据导致页面响应慢或浏览器崩溃。JqGrid支持...

    jqgrid分页参数

    #### 四、分页参数的应用 下面通过一个简单的例子来说明如何使用这些分页参数: 1. **初始化分页参数**: ```java private Integer page = 1; // 当前页 private Integer total; // 总页数 private Integer ...

    jqgrid:我在 github 上的第一个存储库

    这个项目在 GitHub 上的标题“jqgrid:我在 github 上的第一个存储库”表明它是一个学习和示例(jqgrid)的资源,作者可能是初次将代码托管在 GitHub 上。描述中的“网格”一词进一步确认了这与数据表格展示有关,而...

    jqGrid v3.3.1 jQuery Data Grid

    **jqGrid v3.3.1 jQuery Data Grid** jqGrid是一款强大的jQuery插件,用于创建功能丰富的数据网格,它在Web开发中扮演着至关重要的角色。这个组件以其易用性和灵活性而著称,使得开发者能够快速构建数据密集型的...

    JqGrid Demo json

    **JqGrid Demo json** 是一个基于Web的前端数据展示示例,它使用了JqGrid库和JSON数据格式来实现动态、交互式的表格。JqGrid是一个强大的jQuery插件,用于创建高度可定制和功能丰富的网格视图,广泛应用于数据管理和...

    jquery.jqgrid最新版

    2. 初始化jqGrid:通过JavaScript代码设置参数,调用jqGrid方法进行初始化。 ```javascript $("#jqGrid").jqGrid({ url: 'data.json', // 数据源 datatype: 'json', colModel: [ // 列定义 {name: 'id', index:...

    jqGrid 的使用笔记:1. 开始

    然后,通过 JavaScript 初始化 jqGrid: ```javascript $(document).ready(function () { $("#grid").jqGrid({ url: "data.json", // 数据来源,可以是 JSON 格式的 URL 或本地数据 datatype: "json", // 数据...

    jqGrid详解及高级应用

    4. 配置jqGrid:通过JavaScript代码初始化jqGrid,并进行配置以符合页面需求。 jqGrid提供了四种取数据的方式,这包括: 1. 通过XML数据获取:后端提供XML格式的数据源,jqGrid通过配置相应的xmlReader来解析这些...

    jqGrid(版本:5.1.0)

    **jqGrid(版本:5.1.0)详解** jqGrid是一款非常强大的JavaScript表格插件,主要用于在Web页面中展示和操作数据。它基于jQuery库,提供了丰富的功能,包括数据的增删改查、排序、分页、过滤、编辑等,使得在网页上...

    jqGrid完整实例

    url: 'data.json', // 远程数据源 datatype: 'json', colNames: ['Column1', 'Column2', 'Column3'], // 列标题 colModel: [ // 列定义 { name: 'column1', width: 100 }, { name: 'column2', width: 200 }, ...

    jqGrid 4.1 示例(一)

    在客户端,我们需要配置jqGrid的`url`参数指向WCF服务的URL,`dataType`参数设置为'json',这样jqGrid就知道从服务器接收的是JSON数据。然后在接收到数据后,通过调用`addJSONData`方法,将数据插入到表格中。 以下...

    jqGrid:jQuery网格插件

    jqGrid jQuery网格插件jqGrid是启用AjaxJavaScript控件,它提供用于表示和处理Web上表格数据的解决方案。 由于网格是客户端解决方案,可以通过Ajax回调动态加载数据,因此可以将其与任何服务器端技术集成,包括PHP,...

    jqgrid and java

    在 JSP 页面中,可以这样配置 jqGrid: ```html &lt;table id="grid"&gt;&lt;/table&gt; &lt;div id="pager"&gt;&lt;/div&gt; $(document).ready(function() { $("#grid").jqGrid({ url: 'getData.do', datatype: 'json', colModel: ...

    JqGrid:javascript 网格

    jqGrid 是一个支持 Ajax 的 JavaScript 控件,它提供了在 Web 上表示和操作表格数据的解决方案。 由于网格是通过 Ajax 回调动态加载数据的客户端解决方案,因此它可以与任何服务器端技术集成,包括 PHP、ASP、Java ...

    JQGrid 入门案例

    然后在JavaScript部分,我们需要初始化JQGrid: ```javascript $("#grid").jqGrid({ url: 'data.json', // 数据源,这里假设是JSON格式的文件 datatype: 'json', colNames: ['列1', '列2', '列3'], // 列标题 ...

    jQuery网格插件 jqGrid jQuery Data Grid

    6. **编辑与操作**:提供行内编辑、弹出编辑窗口以及新增、删除记录的功能,通过`editData`、`delData`等参数设置编辑和删除的服务器端URL。 7. **自定义行为**:可以通过事件处理函数(如`beforeSelectRow`、`...

    C#封装的JqGrid插件

    3. 配置JqGrid:在HTML页面中,使用jQuery初始化JqGrid,并设置其各项属性,如colModel(列定义)、url(数据源)和pager(分页设置)等。 4. C#代码处理请求:在服务器端,根据JqGrid发送的请求类型(如grid.load...

Global site tag (gtag.js) - Google Analytics