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是一种非常古老的方法，它将静态expandos用于网格的DOM元素（<table>元素）。因此，要正确使用addJSONData，应使用

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

见the documentation。更多beter方式将创建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上的第一篇文章中的一篇{{ 3}}）。 jqGrid有很多自定义选项和回调，例如ajaxGridOptions，serializeGridData和beforeProcessing，您可以使用jsonReader中的函数（请参阅here）和{{1允许您实际加载任何格式的输入数据。使用here，jsonmap和serializeGridData（请参阅prmNames），您几乎可以对发送到服务器的参数进行任何自定义。因此，在非常非常少的情况下，确实需要使用低级postData。

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');

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

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

jqGrid没有addJSONData方法

3 个答案: