jqGrid 没有 addJSONData 方法

Question

我今天下午只是在玩 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

Answer 1

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

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

见the documentation。更好的方法是创建 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 参数）并且具有与datatype: 'json' 相同的格式（请参阅the documentation）。可以使用jsonReader和jsonmap指定数据格式：

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 上的第一篇帖子中的一个 here） . jqGrid 有很多自定义选项和回调，如ajaxGridOptions、serializeGridData 和beforeProcessing，您可以使用jsonReader（参见here）和jsonmap 中的函数，它允许您实际加载任何格式的输入数据。使用prmNames、serializeGridData 和postData（参见here），您几乎可以对发送到服务器的参数进行任何自定义。所以在极少数情况下确实需要使用低级addJSONData。

Answer 2

在大多数情况下，您很接近。我不认为 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 将查找指定的列与传入数组的对象相匹配。

Answer 3

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

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

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

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