如何将JSON数据加载到Jqgrid？ [英] How to load the JSON data into the Jqgrid?

问题描述

我使用以下方法将数据加载到jqgrid中。我无法将 json数据加载到jqgrid中。我将json解析为数组，如 mydata = json。解析（jsondata）。然后我使用数据类型：local将此 数组（mydata） 绑定到jqgrid。我的问题是如何将json数据绑定到jqgrid？

I use the following way to load the data into the jqgrid.I cant able to load the json data into the jqgrid.So i parse the json to array like mydata=json.parse(jsondata).Then i bind this array(mydata) into jqgrid using datatype: "local".my question is How to bind the json data into the 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
        }
    ]

推荐答案

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

First of all you need to define id of the row in the input data. The id attribute of every row (<tr>) will be set in the corresponding value. Because you have already companyid which could play the role it would be enough to add key: true to the properties of "companyid" column in colModel.

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

The problem with loading of the date from the server directly (inclusive loading from the file) you can solve by adding jsonReader which describe the format of input data. Because you use loadonce: true the total, records and the page properties of input data will be ignored and you can use jsonReader in the following simple form:

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

相应的演示是其他。

如果您需要从发布的数据数据中加载数据代码应直接工作（请参阅另一个演示）。我想在解析JSON数据时有一些其他问题，但你没有发布相应的代码。

If you need to load the data from the array of data which you posted your code should directly work ( see another demo). I suppose use have some other problem in the parsing of JSON data, but you don't posted the corresponding code.

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

The advice about the id and key: true are still take place. You can use localReader: {id: "companyid"} for the second case and the same property id: "companyid" in the jsonReader alternatively. I personally prefer to use key: true because the code is easy to read and it's independent from the reader used.

这篇关于如何将JSON数据加载到Jqgrid？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！