2

I'm just playing around with jqGrid this afternoon, and have it working fairly well with a local array data source. However, now I'm trying to get it to load local JSON data.

My code is as follows:

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"
});

I then try to load JSON data using the following:

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

The issue is that jQuery("#list4").jqGrid.addJSONData is undefined. I've also tried:

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

Which throws an exception saying that the method addJSONData is not defined. I can see other documented methods on jQuery("#list4").jqGrid, just not this one. addXMLData is also missing. However, I can verify that these methods are in the jquery.jqGrid.min.js source code.

I just downloaded jqGrid today, so I know I have the latest versions of everything.

I must be doing something wrong, but I'm not sure what it could be. I've put the entire page here:

http://pastie.org/3825067

4

3 に答える 3

9

グリッドのaddJSONDataDOM 要素 (<table>要素) にまだ展開を使用する非常に古い方法です。したがって、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'を参照してください)。と を使用して、データ形式を指定できます。jsonReaderjsonmap

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'直接使用できます。ほとんどの場合、 の使用は、jQuery.ajax ごとにサーバーから手動でデータをロードするaddJSONDataためです。jqGrid には、 、 、 などの多くのカスタマイズ オプションとコールバックがあり、(ここを参照) およびで関数を使用できます。これにより、実質的にあらゆる形式の入力データをロードできます。使用するajaxGridOptionsserializeGridDatabeforeProcessingjsonReaderjsonmapprmNames、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');

私の知る限りでは、初期化後に datatype:'jsonstring' が datatype:'local' に変更されるため、jsonstring を追加すると、"datastr" ではなく "data" パラメーターからデータをロードしようとしますが、空のデータがないためです。ロードされます。

私はこれに貢献したいと考えています...

于 2012-11-29T14:52:41.877 に答える