javascript - 如何将此 JSON 获取到 jqGrid？

Question

我在从无法访问的服务器读取此类 JSON 时遇到问题，因此无法操作 JSON:

{
    "API_ICDFactory": {
        "API_getDataSample": {
            "key_0": {
                "dateTransaction": "1379454296",
                "dateBilling": "1387320296",
                "units": "181",
                "priceUnit": "25.12",
                "amount": "4546.72",
                "company": "Juan Vivas Taller",
                "productRef": "CAR",
                "productDesc": "Detergente especial antiestático"
            },
            "key_1": {
                "dateTransaction": "1377421074",
                "dateBilling": "1385373474",
                "units": "137",
                "priceUnit": "8.99",
                "amount": "1231.63",
                "company": "Autos Caceres 2000",
                "productRef": "BRICAR",
                "productDesc": "Cera hidrofugante para túneles de lavado"
            },
            "status": "success"
        }
    }
}

我不知道如何从这个 Json 中获取元素。如果有人可以帮助我做到这一点。

我正在尝试操作 jqGrid 文档中的这段代码，但我无法得到任何结果。

jQuery(document).ready(function(){ 
    jQuery("#grid").jqGrid({
        url: "url...",
        datatype: "json",
        mtype: "GET",
        colNames: ['Fecha Trans','Fecha Pago', 'Cliente'],
        colModel: [
            {name:'dateTransaction',index:'dateTransaction', width:100,editable:true},
            {name:'dateBilling',index:'dateBilling', width:100,editable:true},
            {name:'company',index:'company', width:100,editable:true}
        ],
        jsonReader: {
            repeatitems:false
        },
        rowNum:10,
        rowList:[10,20,30],
        pager: jQuery('#pager'),
        sortname: 'name',
        viewrecords: true,
        sortorder: 'asc',
        caption:'Title',
        editurl:'url...'
   }).navGrid('#pager');
});

如果有人能告诉我这个 JSON 的正确语法，我就可以完成剩下的工作。

谢谢!

Answer 1

您必须将从服务器返回的 JSON 数据转换为 jqGrid 可以读取的项目数组。此外，我建议您使用 loadonce: true 选项，以便您可以在 jqGrid 内部使用本地分页、排序和过滤/搜索。

例如，您可以通过将 jsonReader 的 root 部分定义为函数来转换输入数据。或者，您可以使用 beforeProcessing 回调来更改服务器响应。例如，您可以使用以下 jsonReader

jsonReader: {
    root: function (obj) {
        var input = obj.API_ICDFactory.API_getDataSample, p, res = [], item;
        for (p in input) {
            item = input[p];
            if (input.hasOwnProperty(p) && typeof item === "object") {
                item.id = p;
                res.push(item);
            }
        }
        return res;
    },
    repeatitems: false
}

The demo展示我的建议。显示

我使用的完整代码如下:

$(function () {
    "use strict";
    var intTemplate = { width: 100, formatter: "integer", sorttype: "integer", align: "right" };
    $("#grid").jqGrid({
        url: "victorgb6.json",
        datatype: "json",
        colNames: ["Fecha Trans", "Fecha Pago", "Cliente"],
        colModel: [
            { name: "dateTransaction", template: intTemplate },
            { name: "dateBilling", template: intTemplate },
            { name: "company" }
        ],
        cmTemplate: {width: 250, editable: true},
        gridview: true,
        height: "auto",
        autoencode: true,
        loadonce: true,
        jsonReader: {
            root: function (obj) {
                var input = obj.API_ICDFactory.API_getDataSample, p, res = [], item;
                for (p in input) {
                    item = input[p];
                    if (input.hasOwnProperty(p) && typeof item === "object") {
                        item.id = p;
                        res.push(item);
                    }
                }
                return res;
            },
            repeatitems: false
        },
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#pager",
        viewrecords: true,
        caption: "Title",
        editurl: "myEditUrl"
    }).jqGrid("navGrid", "#pager");
});