2

我今天下午只是在玩 jqGrid，让它在本地数组数据源上运行得相当好。但是，现在我正试图让它加载本地 JSON 数据。

我的代码如下：

jQuery("#list4").jqGrid({
   datatype: "json", //<-- Also tried "local" here
   height: 'auto',
   autowidth: true,
   forceFit: true,
   colNames:['ID','Name'],
   colModel:[
      {name:'id',index:'id', width:60, sorttype:"int", jsonmap:"id"},
      {name:'name',index:'name', width:90, jsonmap: "name"}
   ],
   multiselect: false,
   caption: "Test"
});

然后我尝试使用以下内容加载 JSON 数据：

jQuery("#list4").jqGrid.addJSONData(json);

问题是jQuery("#list4").jqGrid.addJSONData未定义。我也试过：

jQuery("#list4").jqGrid('addJSONData', json);

这会引发一个异常，说明该方法addJSONData未定义。我可以在 上看到其他记录在案的方法jQuery("#list4").jqGrid，但不是这个。 addXMLData也不见了。但是，我可以验证这些方法是否在jquery.jqGrid.min.js源代码中。

我今天刚刚下载了 jqGrid，所以我知道我拥有所有东西的最新版本。

我一定是做错了什么，但我不确定它可能是什么。我把整个页面放在这里：

http://pastie.org/3825067

4

3 回答 3

9

这addJSONData是一种非常古老的方法，它仍然使用对网格（<table>元素）的 DOM 元素进行扩展。所以要addJSONData正确使用应该使用

jQuery("#list4")[0].addJSONData(json);

请参阅文档。更好的方法是创建 jqGrid 并直接填充数据。您可以使用

jQuery("#list4").jqGrid({
    datatype: "local",
    data: mydata,
    height: 'auto',
    autowidth: true,
    colNames: ['ID', 'Name'],
    colModel: [
        {name: 'id', index: 'id', width: 60, sorttype: "int", key: true},
        {name: 'name', index:'name', width: 90}
    ],
    caption: "Test",
    gridview: true // !!! improve the performance
});

的格式mydata可以是

var mydata = [
        {id: 10, name: "Oleg"},
        {id: 20, name: "Mike"}
    ];

它允许使用本地分页、过滤和数据排序。输入数据不需要排序。

或者，您可以使用datatype: 'jsonstring'和datastr。的值datastr可以是 JSON 字符串或已解析的对象。来自的数据datastr 必须正确排序（如果您使用一些sortname和sortorder参数）并且具有与 for 相同的格式datatype: 'json'（请参阅文档）。可以使用jsonReaderandjsonmap来指定数据格式：

var mydata = {
        //total: 1,  // will be ignored
        //page: 1,   // will be ignored
        //records: 2 // will be ignored
        rows: [
            {id: 10, name: "Oleg"},
            {id: 20, name: "Mike"}
        ]
    ];

对我来说最奇怪的是为什么需要加载“本地 JSON 数据”？与“本地数组数据源”的区别在哪里？您可以使用$.parseJSON将输入数据转换为对象或datatype: 'jsonstring'直接使用。在大多数情况下，使用addJSONData是因为每个 jQuery.ajax 手动从服务器加载数据，这确实是一个很好的想法（请参阅我在 stackoverflow 上的第一篇文章中的一个）。jqGrid 有很多自定义选项和回调，例如ajaxGridOptions，serializeGridData和beforeProcessing，您可以使用jsonReader（参见此处）和中的函数jsonmap，它允许您加载几乎任何格式的输入数据。使用prmNames和serializeGridData（postData参见此处）您几乎可以对发送到服务器的参数进行任何自定义。addJSONData因此，在极少数情况下确实需要使用低级。

于 2012-04-21T12:06:38.767 回答
6

在大多数情况下，你很接近。我不认为 addJSONData 方法是要走的路。以下是我们处理本地 JSON 数据的方式：

网格：

$("#list4").jqGrid({
   datatype: "local", //<-- "local" tells jqGrid not to try and get the data itself
   height: 'auto',
   autowidth: true,
   forceFit: true,
   colNames:['ID','Name'],
   colModel:[
      {name:'id',index:'id', width:60, sorttype:"int", jsonmap:"id"},
      {name:'name',index:'name', width:90, jsonmap: "name"}
   ],
   multiselect: false,
   caption: "Test"
});

将数据提供给网格：

// Clear the grid if you only want the new data
$('#list4').clearGridData(true); 
// Set the data the tell the grid to refresh
$('#list4').setGridParam({ data: jsonData, rowNum: jsonData.length }).trigger('reloadGrid');

您还应该将 jsonData 更改为：

var jsonData = [
  {id: 1, name: 'Apple'},
  {id: 2, name: 'Banana'},
  {id: 3, name: 'Pear'},
  {id: 4, name: 'Orange'}
];

jqGrid 将寻找将指定的列与传递到数组中的对象匹配。

于 2012-04-21T00:56:12.507 回答
1

我正在使用版本 jqGrid 4.1.2 使用 JSONReader 初始化网格后datatype:'jsonstring'，添加 jsonstring 数据时，我必须包含datatype:'jsonstring'参数。

$('#list4').setGridParam({ datastr: jsonData, datatype:'jsonstring', rowNum: jsonData.length }).trigger('reloadGrid');

据我所知，这是因为初始化后数据类型：'jsonstring' 变成了数据类型：'local'，所以当添加 jsonstring 时，它会尝试从“data”参数而不是“datastr”加载数据，但因为是空的，没有数据已加载。

我希望为此做出贡献...

于 2012-11-29T14:52:41.877 回答