jqGrid：4、 remote data(JSON)-JavaSript-爱易网页

jqGrid：4、 remote data(JSON)

日期：2014-05-16　浏览次数：20376 次

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.
     */

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jqGrid：4、 remote data(JSON)

相关资料更多>

推荐阅读更多>