jquery - jqGrid - 解析 json 响应

标签 jquery jquery-plugins jqgrid

我有一个 jqGrid,它向我的服务器发送 ajax 请求。但是,我的服务器以完全不同的格式发送 json 响应(我无法更改它)。因此我需要解析来自服务器的响应,以便我的 jqGrid 可以正确显示数据。

如果我理解正确,我可以将ajaxGridOptions转换器一起使用。因此,我可以捕获响应并解析它。在我看来,转换器工作正常并正确解析响应。但是,jqGrid 不理解我解析的响应。它永远显示一条消息“正在加载...”(我可以在 firebug 中看到请求/响应很好,并且控制台中没有 javascript 错误)。

有人可以帮我解决这个问题吗?

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
</head><body>

<!-- IMPORT JS -->  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js"></script>    

<script>

$(document).ready(function() {
    var parsedResponse = '{"currentPage" : "1", "totalRecords" : 5, "pageSize" : 3,'
            + '"myData" :[{"id" : "1", "name" : "Name 1" },'
            + '          { "id" : "3", "name" : "Name 3" },'
            + '          { "id" : "2", "name" : "Name 2" }]'
            + '}';

    var myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");
    var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");

    $("body").append(myGrid, myPager);

    myGrid.jqGrid({
        pager : myPager,
        // datastr: parsedResponse, // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
        // datatype : "jsonstring", // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
        serializeGridData : function(data) {
            return '{"SearchCriteria": {"keyword":"emai","orderByField":"userName","sortOrder":"DESC","pagination":{"pageSize":"10","pageNumber":"2"}}}';
        },
        ajaxGridOptions: {
            url: "../rush-controller-testing/userAccount/find",
            type: "POST",
            contentType: "application/json; charset=utf-8",         
            dataType: "json",
            converters: { "text json": function (responseText) {
                    // console.log(responseText); // Shows the response string from the cerver
                    return parsedResponse;
                }
            },
            success: function(data, textStatus, jqXHR ) {
                // Nice! It shows 'parsedResponse' from 'converters'. Looks good so far.
                console.log(data); console.log(textStatus); console.log(jqXHR);
            }
        },
        colModel : [
            { name : 'name', index : 'id', width : "500"}
        ],
        jsonReader: {
            root: "myData", page: "currentPage", records: "totalRecords" 
        },
        rowNum : 3,
        viewrecords : true,
        height : "auto",
        ignoreCase : true,
        hidegrid: false
    });

}); 
</script>
</body>
</html>

===更新===

我的服务器响应类似于:

{"UserAccountSearchResult":{
    "userAccounts":[{
        "userAccountId":18,
        "clientAccount":{"clientAccountId":19,"name":"name:5791","firstName":"firstName:5791","lastName":"lastName:5791","active":true},
        "userName":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbab2beb6b39fe7edebeaefebf1bcb0b2" rel="noreferrer noopener nofollow">[email protected]</a>",
        "password":"password824504",
        "firstName":"firstName824504",
        "lastName":"lastName824504",
        "isActive":true,
        "phoneNumbers":{"phoneNumberId":36,"number":824504824504},
        "addresses":{"addressId":126,"country":"CANADA","provinceOrState":"ONTARIO","address":"address824504","city":"Windsor","postalCode":"postalCode824504"},
        "emails":{"emailId":36,"email":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5d4b4d41404a4f5c576b434f47426e161c1a1b1e1a004d4f" rel="noreferrer noopener nofollow">[email protected]</a>"}
        },{
        "userAccountId":44,
        "clientAccount":{"clientAccountId":45,"name":"name:3136","firstName":"firstName:3136","lastName":"lastName:3136","active":true},
        "userName":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07626a666e6b47303e313436352964686a" rel="noreferrer noopener nofollow">[email protected]</a>",
        "password":"password796312",
        "firstName":"firstName796312",
        "lastName":"lastName796312",
        "isActive":true,
        "phoneNumbers":{"phoneNumberId":88,"number":796312796312},
        "addresses":{"addressId":298,"country":"CANADA","provinceOrState":"ONTARIO","address":"address796312","city":"Greater Sudbury","postalCode":"postalCode796312"},
        "emails":{"emailId":88,"email":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="512234323e3f35302328143c30383d116668676260637f3230" rel="noreferrer noopener nofollow">[email protected]</a>"}
        }]
    ,"pagination":{"pageSize":10,"pageNumber":2,"totalItems":49}}}

所以,我已经有一个函数可以将此响应解析为如下所示。我想将这个解析后的响应与 jqGrid 一起使用,因为在我的应用程序中有很多这样的情况:

{"currentPage" : "1",   "totalRecords" : 2, "pageSize" : 3,
    "myData" :[{
        "id" : "1", "name" : "firstName824504", "email" : "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="740711171b1a1015060d3119151d18344c46404144405a1715" rel="noreferrer noopener nofollow">[email protected]</a>"
    },{
        "id" : "3", "name" : "firstName796312", "email" : "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f7e1e7ebeae0e5f6fdc1e9e5ede8c4b3bdb2b7b5b6aae7e5" rel="noreferrer noopener nofollow">[email protected]</a>"
    }]
};

===最终代码===

我成功了。谢谢您的帮助。这是我的功能示例。我希望它能在未来帮助其他人。

$(document).ready(function() {
    /*
     * Here I will have a very complex logic to parse the response from the server in something jqGrid can understand.
     * Right now it is just a hard-coded string to make thinks easer to understand
     */ 
    function parseResponse(responseText){
        var parsedResponse = '{"currentPage" : "1", "totalRecords" : 5, "pageSize" : 3, "pageTotal" : 2,'
                + '"myData" :[{"id" : "1", "name" : "Name 1" },'
                + '          { "id" : "3", "name" : "Name 3" },'
                + '          { "id" : "2", "name" : "Name 2" }]'
                + '}';  
        return JSON.parse(parsedResponse);
    };

    var myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");
    var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");

    $("body").append(myGrid, myPager);

    myGrid.jqGrid({
        pager : myPager,
        // datastr: parsedResponse, // If I use these parameters and remove ajaxGridOptions then it will work fine with the local data
        datatype : "json",
        url: "../rush-controller-testing/userAccount/find",
        mtype: "POST",
        serializeGridData : function(data) {
            // That is just a hard-coded example to make things easier to understand. Will change it to a more complex logic later.
            return '{"SearchCriteria": {"keyword":"emai","orderByField":"userName","sortOrder":"DESC","pagination":{"pageSize":"10","pageNumber":"3"}}}';
        },
        ajaxGridOptions: {
            contentType: "application/json; charset=utf-8",
        },
        colModel : [
            { name : 'name', index : 'name', width : "500"}
        ],
        jsonReader: {
            repeatitems: false,
            root: function(data){
                //the actual data
                var result = parseResponse(data);
                return result.myData;
            },
            total: function(data) {
                //total pages for the query
                var result = parseResponse(data);
                return result.pageTotal;
            },
            page: function(data){
                //current page of the query
                var result = parseResponse(data);
                return result.currentPage;
            },
            records: function(data){
                //total number of records for the query
                var result = parseResponse(data);
                return result.totalRecords;
            } 
        },
        rowNum : 3,
        viewrecords : true,
        height : "auto",
        ignoreCase : true,
        hidegrid: false
    });

});

最佳答案

您以错误的方式使用 jqGrid 选项。重要的是要理解 jqGrid 需要“知道”一些参数,例如 urldatatype。如果未指定datatype,则将使用默认值“xml”

您不应覆盖 jqGrid 中已存在的 ajaxGridOptions 参数。所以你应该正确使用jqGrid。如果 URL "../rush-controller-testing/userAccount/find" 返回您在 parsedResponse 中包含的格式的数据,那么您的代码可能如下:

myGrid.jqGrid({
    url: "../rush-controller-testing/userAccount/find",
    datatype: "json",
    mtype: "POST",
    pager: "#useraccount-search-datagrid-pager",
    serializeGridData : function(data) {
        // the function is DUMMY. it MUST be replaced
        return '{"SearchCriteria": {"keyword":"emai","orderByField":"userName","sortOrder":"DESC","pagination":{"pageSize":"10","pageNumber":"2"}}}';
    },
    ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
    colModel: [
        { name: 'id', key: true, width: 100 }
        { name: 'name', width: 400 }
    ],
    jsonReader: {
        root: "myData",
        page: "currentPage",
        records: "totalRecords",
        repeatitems: false
    },
    rowNum: 3,
    gridview: true,
    autoencode: true,
    viewrecords: true,
    height: "auto",
    ignoreCase: true,
    hidegrid: false
});

确实需要在 jsonReader 内部使用 repeatitems: false 属性。我认为您不需要使用 jQuery.ajax 的任何转换器

关于jquery - jqGrid - 解析 json 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16092372/

相关文章:

Jquery Mobile ListView 禁用画外音

javascript - 处理多种类型数据的AJAX请求

jquery - Mottie 的虚拟键盘接近验证真实

jquery - 如何在 jqgrid 标题组中居中对齐文本

jquery - 检查、比较数据值并添加类

javascript - Jquery 验证未触发且控制台中没有错误

javascript - OOP jQuery 插件 elem 在一个地方未定义,而在其他地方未定义

javascript - document.ready 时显示模式对话框

java - JqG​​rid 不从 JSON 加载数据

jquery - 启用/禁用 jqGrid 中的自定义按钮