Javascript 如何将 JSON 数据加载到 Jqgrid 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12280713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load the JSON data into the Jqgrid?
提问by User
I use the following way to load the data into the jqgrid.I cant able to load the json datainto 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?
我使用以下方式将数据加载到 jqgrid 中。我无法将json 数据加载到 jqgrid 中。所以我将 json 解析为数组，如mydata=json.parse(jsondata)。然后我绑定这个数组（mydata）到 jqgrid 使用数据类型：“本地”。我的问题是如何将 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 format:
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
}
]
回答by Oleg
First of all you need to define idof the row in the input data. The idattribute of every row (<tr>) will be set in the corresponding value. Because you have already companyidwhich could play the role it would be enough to add key: trueto the properties of "companyid"column in colModel.
首先，您需要定义id输入数据中的行。id每一行的属性（<tr>）都会设置在相应的值中。因为您已经拥有companyidwhich 可以发挥作用，所以将其添加key: true到"companyid"列的属性就足够了colModel。
The problem with loading of the date from the server directly (inclusive loading from the file) you can solve by adding jsonReaderwhich describe the format of input data. Because you use loadonce: truethe total, recordsand the pageproperties of input data will be ignored and you can use jsonReaderin the following simple form:
直接从服务器加载日期（包括从文件加载）的问题，您可以通过添加jsonReader描述输入数据格式的 which来解决。因为你用loadonce: true的total，records和page输入数据的属性将被忽略，你可以用jsonReader下面的简单形式：
jsonReader: {repeatitems: false, root: function (obj) { return obj; }}
The corresponding demo is here.
相应的演示在这里。
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.
如果您需要从发布的数据数组中加载数据，您的代码应该可以直接工作（参见另一个演示）。我想使用在解析JSON数据时还有一些其他问题，但是您没有发布相应的代码。
The advice about the idand key: trueare still take place. You can use localReader: {id: "companyid"}for the second case and the same property id: "companyid"in the jsonReaderalternatively. I personally prefer to use key: truebecause the code is easy to read and it's independent from the reader used.
关于id和的建议key: true仍在发生。您可以使用localReader: {id: "companyid"}第二种情况及同一物业id: "companyid"的jsonReader交替。我个人更喜欢使用，key: true因为代码易于阅读并且独立于所使用的阅读器。
