1

我对 JSON 很陌生。我想将 java 对象数据显示为 JSON 数据。我已经完成了一些代码，但它只显示网格，而不是网格数据。

我的 jsp 页面如下所示：

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jeeni Software - jQuery Ajax Data Grid Example</title>
<c:set var="baseURL" value="${pageContext.request.contextPath}"/>
<script type="text/javascript" src="${baseURL}/js/jquery.min.js"></script>
<script type="text/javascript" src="${baseURL}/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="${baseURL}/js/jquery-ui.min.js"></script>

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/redmond/jquery-ui.css">
    <link rel="stylesheet" href="css/redmond/jquery.ui.theme.css">
    <link rel="stylesheet" href="css/jqgrid/ui.jqgrid.css">

<!--     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> -->
<!--     <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> -->
<!--     <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> -->
<!--     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> -->

    <script>
        $(document).ready(function() {
            setupGrid();
            attachSendDataEvent();
            attachDeleteButton();
        });

        function attachSendDataEvent(){
            $("#sendData").click(function(){
                var data = "firstName=" + $("#firstName").val() + "&" +
                        "lastName=" + $("#lastName").val() + "&" +
                        "address=" + $("#address").val() + "&" +
                        "postcode=" + $("#postcode").val();

                $.post("data/person/put",
                        data,
                        dataSentOK
                );
            });
            return false;
        }

        function attachDeleteButton(){
            $("#deleteBtn").click(function(){
                var grid = jQuery("#dataTable").jqGrid();
                var rowNum = grid.getGridParam('selrow');
                if(rowNum){
                    var person = grid.getRowData(rowNum);
                    var data = "perId=" + person.id;
                    $.post("data/person/delete",
                            data,
                            dataSentOK
                    );
                }
            });
        }

        function dataSentOK(){
            jQuery("#dataTable").jqGrid().trigger("reloadGrid");
        }

        function setupGrid(){
            jQuery("#dataTable").jqGrid({
                url: "data/person/get",
                datatype: "json",
                loadonce : false,
                jsonReader: {root : "rows", repeatitems: false, id: "id"},
                colNames:['ID','First Name','Last Name', 'Address', 'Postcode'],
                colModel:[
                    {name:'id',index:'id', width:20},
                    {name:'firstName',index:'firstName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'address',index:'address', width:380},
                    {name:'postcode',index:'postcode', width:100}
                ],
                rowNum:4,
                rowList:[5,10,20,30],
                height:200,
                pager: "#pagingDiv",
                viewrecords: true,
                caption: "Names and Addresses"
            }).navGrid('#pager', {edit:false,add:false,del:false, search: false});
        }
    </script>

</head>
<body>

    <div class="centreDiv">
        <div class="heading"><h1>Jeeni Software - jQuery Ajax Data Grid Example</h1></div>

        <div>
            <div style="height:170px;">
                <div class="form">
                    <div class="padding">
                        <label>First Name:</label> <input id="firstName"/><br/>
                        <label>Last Name:</label> <input id="lastName"/><br/>
                        <label>Address:</label> <input id="address" size="40"><br/>
                        <label>Postcode:</label> <input id="postcode"/><br/>
                        <button id="sendData">Send</button>
                    </div>
                </div>
            </div>

            <!-- jqGrid will be injected into this DIV-->
            <h2>jqGrid Data Table</h2>
            <div>
                <table id="dataTable"></table>
                <div id="pagingDiv"></div>
                <button id="deleteBtn">Delete Row</button>
            </div>
        </div>

    </div>
</body>
</html>

和这样的弹簧控制器：

 @RequestMapping(value="get", method = RequestMethod.GET)
  @ResponseBody
  public JqGridData<Person> getPeople(@RequestParam("page") int page,
                              @RequestParam("rows") int rows,
                              @RequestParam("sidx") String sortColumnId,
                              @RequestParam("sord") String sortDirection){

    int totalNumberOfPages = GridUtils.getTotalNumberOfPages(people, rows);
    int currentPageNumber = GridUtils.getCurrentPageNumber(people, page, rows);
    int totalNumberOfRecords = people.size();
    List<Person> pageData = GridUtils.getDataForPage(people, page, rows);

    JqGridData<Person> gridData = new JqGridData<Person>(totalNumberOfPages, currentPageNumber, totalNumberOfRecords, pageData);

    return gridData;
  }

谁能告诉我这段代码有什么问题？

4

0 回答 0