如何将 JSON 数据加载到 Jqgrid 中？答案

【问题标题】：How to load the JSON data into the Jqgrid?如何将 JSON 数据加载到 Jqgrid 中？
【发布时间】：2012-09-05 11:45:34
【问题描述】：

我使用以下方式将数据加载到jqgrid中。我无法将json数据加载到jqgrid中。所以我将json解析为mydata=json之类的数组。 parse(jsondata)。然后我使用 array(mydata) 将这个 array(mydata) 绑定到 jqgrid 中 datatype: "local"。我的问题是如何将json数据绑定到jqgrid中？

         $("#datagrid").jqGrid({

                    datatype: "local", 
                    data: mydata,
                    colNames:['companyid','company', 'price', 'Change','perchange','LastUpdated'],
                    colModel:[
                        {name:'companyid',index:'companyid', width:100,editable:true,editoptions:{size:10}},
                        {name:'company',index:'company', width:100,editable:true},
                        {name:'price',index:'price', width:100,editable:true,editoptions:{size:10}},
                        {name:'Change',index:'Change', width:100,editable:true,editoptions:{size:25}},
                        {name:'perchange',index:'perchange', width:100, align:"right",editable:true,editoptions:{size:10}},
                        {name:'LastUpdated',index:'LastUpdated', width:200, align:"right",editable:true,editoptions:{size:10}}
                    ],
                    rowNum:10,
                    rowList:[3,6],
                    loadonce: true,
                    pager: '#navGrid',
                    sortname: 'companyid',
                    sortorder: "asc", 
                    height: 210,
                    width:600,
                    onSelectRow: function(id)
                                 {
                                    getID = jQuery("#datagrid").jqGrid('getCell', id, 'companyid')
                                 },
                    viewrecords: true,
                    caption:"JQ GRID"
                });

JSON 格式：

    [
        {
            "company": "test",
            "price": 98,
            "Change": 8,
            "perchange": 8,
            "LastUpdated": "2",
            "companyid": 2
        },
        {
            "company": "test123",
            "price": 1,
            "Change": 1,
            "perchange": 1,
            "LastUpdated": "1",
            "companyid": 3
        },
        {
            "company": "abc",
            "price": 1234,
            "Change": 123,
            "perchange": 1,
            "LastUpdated": "1",
            "companyid": 1
        }
    ]

【问题讨论】：

标签： javascript jquery json jqgrid

【解决方案1】：

首先你需要定义输入数据中行的id。每行 (<tr>) 的 id 属性将设置为相应的值。因为您已经有companyid 可以扮演该角色，所以将key: true 添加到colModel 中"companyid" 列的属性中就足够了。

直接从服务器加载日期（包括从文件加载）的问题，您可以通过添加描述输入数据格式的jsonReader 来解决。因为您使用loadonce: true，所以输入数据的total、records 和page 属性将被忽略，您可以按以下简单形式使用jsonReader：

jsonReader: {repeatitems: false, root: function (obj) { return obj; }}

对应的demo是here。

如果您需要从您发布的数据数组中加载数据，您的代码应该可以直接工作（请参阅another demo）。我想使用在解析JSON数据时还有其他问题，但是您没有发布相应的代码。

关于id 和key: true 的建议仍在进行中。您可以将localReader: {id: "companyid"} 用于第二种情况，或者在jsonReader 中使用相同的属性id: "companyid"。我个人更喜欢使用key: true，因为代码易于阅读并且独立于所使用的阅读器。

【讨论】：