Question

我是jqgrid的新手，面对下面的问题。我想做的是用户将在表单中输入订单详细信息。这些表单详细信息将从submit发送到Jqgrid.Now jqgrid将表单参数传递给Spring控制器。 Spring控制器将处理数据并将数据发送到Jqgrid。

1) ViewOrders.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="/resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/resources/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/resources/js/jquery-ui.min.js"></script>

<link type="text/css" rel="stylesheet"
    href="/resources/css/jquery-ui.min.css" />
<link type="text/css" rel="stylesheet"
    href="/resources/css/ui.jqgrid.css" />

<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>

<script type="text/javascript">
jq(function{
    jq("#submit").click(function(){
        jq("#grid").jqGrid({
            url : '/Online Fund Trading/Overview/Order.spring',
            datatype : 'json',
            mtype : 'POST',
            colNames : [ 'Customer Id', 'Account Id', 'Order Id','Order Date','Order Amount','Order Units','Order Type','Fund Id' ],
            colModel : [ {
                name : 'CusId',
                index : 'CusId',
                width : 15,
                editable : false,
                editoptions : {
                    readonly : true,
                    size : 10
                },
                hidden : true
            }, {
                name : 'AccId',
                index : 'AccId',
                width : 15,
                editable : true,
                editrules : {
                    required : true
                },
                editoptions : {
                    size : 10
                }
            }, {
                name : 'OrdId',
                index : 'OrdId',
                width : 15,
                editable : false,
                editrules : {
                    required : true
                },
                editoptions : {
                    size : 10
                }
            } ,{
                name : 'OrdDate',
                index : 'OrdDate',
                width : 15,
                editable : false,
                editrules : {
                    required : true
                },
                editoptions : {
                    size : 10
                }
            },{
                name : 'OrdAmount',
                index : 'OrdAmount',
                width : 15,
                editable : false,
                editrules : {
                    required : true
                },
                editoptions : {
                    size : 10
                }
            },{
                name : 'OrdUnits',
                index : 'OrdUnits',
                width : 15,
                editable : false,
                editrules : {
                    required : true
                },
                editoptions : {
                    size : 10
                }
            },{
                name : 'OrdType',
                index : 'OrdType',
                width : 15,
                editable : false,
                editrules : {
                    required : true
                },
                editoptions : {
                    size : 10
                }
            },{
                name : 'FundId',
                index : 'FundId',
                width : 15,
                editable : false,
                editrules : {
                    required : true
                },
                editoptions : {
                    size : 10
                }
            } 

            ],
            postData : {
                AccId           : function(){return jq.("#AccId").val();}
                FromDate        : function(){return jq.("#FromDate").val();}
                ToDate          : function(){return jq.("#FromDate").val();}
                TransactionType : function(){return jq.("#FromDate").val();}
            },
            rowNum : 20,
            rowList : [ 20, 40, 60 ],
            height : 200,
            autowidth : true,
            rownumbers : true,
            pager : '#pager',
            sortname : 'CusId',
            viewrecords : true,
            sortorder : "asc",
            caption : "Orders Overview",
            emptyrecords : "Empty records",
            loadonce : false,
            loadComplete : function() {
            },
            jsonReader : {
                root : "rows",
                page : "page",
                total : "total",
                records : "records",
                repeatitems : false,
                cell : "cell",
                id : "id"
            }
        });
        jq("#grid").jqGrid('navGrid', '#pager', {
            edit : false,
            add : false,
            del : false,
            search : true
        }, {}, {}, {}, {
            sopt : [ 'eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew' ],
            closeOnEscape : true,
            multipleSearch : true,
            closeAfterSearch : true
        });

        jq("#grid").navButtonAdd('#pager', {
            caption : "Add",
            buttonicon : "ui-icon-plus",
            onClickButton : addRow,
            position : "last",
            title : "",
            cursor : "pointer"
        });

        jq("#grid").navButtonAdd('#pager', {
            caption : "Edit",
            buttonicon : "ui-icon-pencil",
            onClickButton : editRow,
            position : "last",
            title : "",
            cursor : "pointer"
        });

        jq("#grid").navButtonAdd('#pager', {
            caption : "Delete",
            buttonicon : "ui-icon-trash",
            onClickButton : deleteRow,
            position : "last",
            title : "",
            cursor : "pointer"
        });

        jq("#btnFilter").click(function() {
            jq("#grid").jqGrid('searchGrid', {
                multipleSearch : false,
                sopt : [ 'eq' ]
            });
        });

        // Toolbar Search
        jq("#grid").jqGrid('filterToolbar', {
            stringResult : true,
            searchOnEnter : true,
            defaultSearch : "cn"
        });


    }); 
});


</script>

</head>
<body>
    <form:form id="ViewOrders" commandName="ViewOrders">

        <table>
            <tr>
                <td>Enter AccId</td>
                <td><form:input path="AccId" /></td>
            </tr>
            <tr>
                <td>From Date</td>
                <td><form:input path="FromDate" /></td>
                <td>To Date</td>
                <td><form:input path="ToDate" /></td>
            </tr>
            <tr>
                <td>Enter Transaction Type</td>
                <td><form:input path="TransactionType" /></td>
            </tr>
            <tr>
                <td colspan="4"><input type="submit" id="submit"
                    value="Get Orders"></td>
            </tr>
        </table>
    </form:form>

<div id="jqgrid">
    <table id="grid"></table>
    <div id="pager"></div>
</div>

</body>

</html>

2)OverviewController.java

package com.oft.controller;

import java.util.Iterator;
import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.oft.service.OverviewService;
import com.oft.valueobjects.OrderOverviewData;
import com.oft.valueobjects.OrderOverviewForm;
import com.oft.valueobjects.OrderOverviewResponse;

@Controller
@RequestMapping(value="Overview")
public class OverviewController
{
    @Autowired
    OverviewService service;

    @RequestMapping(value="Order.spring",method=RequestMethod.GET)
    public ModelAndView getOrderView(ModelMap map,HttpSession session)
    {
        ModelAndView modelAndView=new ModelAndView("ViewOrders");
        modelAndView.addObject("ViewOrders", new OrderOverviewForm());
        return modelAndView;
    }

    @RequestMapping(value="Order.spring",method=RequestMethod.POST)
    public @ResponseBody OrderOverviewResponse getOrderOverview(@RequestBody OrderOverviewForm form,HttpSession session)
    {
        System.out.println(form);

        List<OrderOverviewData> datas=(List<OrderOverviewData>)service.getOrderOverview(form, 1);

        for (Iterator iterator = datas.iterator(); iterator.hasNext();) {
            OrderOverviewData orderOverviewData = (OrderOverviewData) iterator.next();  
            System.out.println(orderOverviewData);
        }
        OrderOverviewResponse response=new OrderOverviewResponse();

        response.setPage("1");
        response.setTotal("5");
        response.setRows(datas);
        response.setRecords(String.valueOf(datas.size()));

        return response;
    }

}

3)OrderOverviewForm.java

public class OrderOverviewForm 
{
    private Date FromDate;
    private Date ToDate;
    private String TransactionType;
    private Integer AccId; 

//getter and setter
}

4)OrderOverviewResponse.java

public class OrderOverviewResponse {

    public String page;
    public String total;
    public String records;
    public List<OrderOverviewData> rows;
//getter and setter
}

但在提交数据后，我收到消息

The server refused this request because the request entity
is in a format not supported by the requested resource 
for the requested method.

我已经加入了jackson个罐子，但我并不认为我做错了什么。请帮帮我。

Answer 1

这是jqgrid中的预定义函数，它将数据绑定到网格无论是来自客户端还是服务器端。

 $('#yourGridId')[0].addJSONData(eval("(" + JSON.stringify(yourFormDataObject) + ")"));

无法通过jqgrid传递表单数据

1 个答案: