jqGrid：三、 remote data(XML)

最新推荐文章于 2021-02-12 16:54:01 发布

tanlingcau

最新推荐文章于 2021-02-12 16:54:01 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： XML Servlet HTML XHTML

本文链接：https://blog.youkuaiyun.com/tanlingcau/article/details/83726431

Javascript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个使用JqGrid展示XML数据的例子，通过GET请求从服务器获取XML格式的数据并将其显示在一个表格中。该表格支持分页、排序等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建页面jqgrid_xml.html

<!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(){ 
              var lastSel;
              $("#grid_id").jqGrid({
                url:'/demo2/servlet/JqGridXmlServlet',
                mtype: 'GET',
                datatype: 'xml',
                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>

和前一个页面的区别主要在

 url:'/demo2/servlet/JqGridXmlServlet',
                mtype: 'GET',
                datatype: 'xml',

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 com.et.ar.exception.ActiveRecordException;
import com.qoma.db.vo.InvHeader;
import com.qoma.service.InvHeaderService;

public class JqGridXmlServlet extends HttpServlet {

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

    private InvHeaderService service = new InvHeaderService();

    /**
     * Constructor of the object.
     */
    public JqGridXmlServlet() {
        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/xml");
        PrintWriter out = response.getWriter();

        Integer page = Integer.parseInt(request.getParameter("page"));
        Integer limit = Integer.parseInt(request.getParameter("rows"));
        String sidx = request.getParameter("sidx");
        String sord = request.getParameter("sord");

        String s = "";

        if (null == sidx || "".equals(sidx))
            sidx = "1";

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

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

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

        if (start < 0)
            start = 0;

        s = "<?xml version='1.0' encoding='utf-8'?>";
        s += "<rows>";
        s += "<page>" + page + "</page>";
        s += "<total>" + total_pages + "</total>";
        s += "<records>" + count + "</records>";

        // be sure to put text data in CDATA
        List<InvHeader> list;
        try {
            list = service.getLimitList(start, limit, sidx, sord);
            for (InvHeader vo : list) {
                s += "<row id='" + vo.invId + "'>";
                s += "<cell>" + vo.invId + "</cell>";
                s += "<cell>" + vo.invDate + "</cell>";
                s += "<cell>" + vo.amount + "</cell>";
                s += "<cell>" + vo.tax + "</cell>";
                s += "<cell>" + vo.total + "</cell>";
                s += "<cell><![CDATA[" + vo.note + "]]></cell>";
                s += "</row>";
            }
        } catch (ActiveRecordException e) {
            e.printStackTrace();
        }
        s += "</rows>";

        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
    }

}

注意：

response.setContentType("text/xml");