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是一个非常古老的方法,它使用仍然expandos到网格的DOM元素(<table>元素).所以要addJSONData正确使用,应该使用

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

请参阅文档.更多的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'(见文档).可以使用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上的第一篇文章中的一篇).jqGrid有很多自定义选项和回调函数ajaxGridOptions,serializeGridData并且beforeProcessing,你可以使用函数jsonReader(参见这里)jsonmap,它允许你几乎加载任何格式的输入数据.使用prmNames,serializeGridData和postData(见这里)你可以发送到服务器的参数几乎任何定制.因此,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将寻找匹配指定给传递给数组的对象的列.