Java JSON数据在jqgrid中不可见_Java_Jquery_Json_Jqgrid

Java JSON数据在jqgrid中不可见

java jquery json jqgrid

Java JSON数据在jqgrid中不可见,java,jquery,json,jqgrid,Java,Jquery,Json,Jqgrid,我对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 "-//W3

我对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>


Jeeni软件-jQuery Ajax数据网格示例
$（文档）.ready（函数（）{
setupGrid（）；
attachSendDataEvent（）；
attachDeleteButton（）；
});
函数attachSendDataEvent（）{
$（“#发送数据”）。单击（函数（）{
var data=“firstName=”+$（“#firstName”）.val（）+“&”+
“lastName=”+$（“#lastName”）.val（）+“&”+
“address=“+$（“#address”）.val（）+”&”+
“postcode=“+$（“#postcode”）.val（）；
$.post（“数据/人/放置”，
数据
达森托克
);
});
返回false；
}
函数attachDeleteButton（）{
$（“#删除BTN”）。单击（函数（）{
var grid=jQuery（“#dataTable”）.jqGrid（）；
var rowNum=grid.getGridParam（'selrow'）；
if（rowNum）{
var person=grid.getRowData（rowNum）；
var data=“perId=”+person.id；
$.post（“数据/人/删除”，
数据
达森托克
);
}
});
}
函数dataSentOK（）{
jQuery（“#dataTable”）.jqGrid（）.trigger（“reloadGrid”）；
}
函数setupGrid（）{
jQuery（“#数据表”）.jqGrid({
url:“数据/人/获取”，
数据类型：“json”，
loadonce:false，
jsonReader:{root:“行”，repeatitems:false，id:“id”}，
colNames:['ID'，'First Name'，'Last Name'，'Address'，'Postcode']，
colModel：[
{名称：'id'，索引：'id'，宽度：20}，
{name:'firstName'，索引：'firstName'，宽度：100}，
{name:'lastName'，索引：'lastName'，宽度：100}，
{名称：'address'，索引：'address'，宽度：380}，
{名称：'postcode'，索引：'postcode'，宽度：100}
],
rowNum:4，
行列表：[5,10,20,30]，
身高：200，
寻呼机：“pagingDiv”，
viewrecords：是的，
标题：“姓名和地址”
}).navGrid（“#pager”，{edit:false，add:false，del:false，search:false}）；
}
Jeeni软件-jQuery Ajax数据网格示例
名字：

姓氏：

地址：

邮政编码：

邮寄
jqGrid数据表
删除行

弹簧控制器如下所示：

 @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;
  }

@RequestMapping（value=“get”，method=RequestMethod.get）
@应答器
公共JqGridData getPeople（@RequestParam（“page”）int page，
@RequestParam（“行”）int行，
@RequestParam（“sidx”）字符串sortColumnId，
@RequestParam（“sord”）字符串（排序方向）{
int totalNumberOfPages=GridUtils.getTotalNumberOfPages（人，行）；
int currentPageNumber=GridUtils.getCurrentPageNumber（人、页、行）；
int totalNumberOfRecords=people.size（）；
List pageData=GridUtils.getDataForPage（人员、页面、行）；
JqGridData gridData=新的JqGridData（totalNumberOfPages、currentPageNumber、totalNumberOfRecords、pageData）；
返回网格数据；
}

有人能告诉我这个代码有什么问题吗？

您能提供确切的服务器响应吗？您可以使用浏览器或许多web浏览器的开发人员工具来捕获HTTP流量。顺便说一句，您应该在页面上明确包含

grid.locale en.js

。您可以将java列表对象转换为json数据，并将json数据传递到您的网格中。请参阅我先前发布的答案。谢谢。将grid.local-en.js ref包含到jsp中之后。问题得到解决。