jqGrid no carga datos

Estoy seguro de que esto es algo simple que me falta, pero parece que no puedo encontrarlo. Tengo un jqGrid simple especificado aquí:

$('#mainGrid').jqGrid({ datatype: 'local', colNames: ['id', 'name'], colModel: [ { name: 'id', index: 'id', width: 100 }, { name: 'name', index: 'name', width: 300 } ], rowNum: 9999, sortname: 'name', viewrecords: true, sortorder: 'asc', data: [{"id":"924c18a4-cad6-4b6a-97ef-f9ca61614530","name":"Pathway 1"},{"id":"54897f40-49ab-4abd-acac-6047006c7cc7","name":"Pathway 2"},{"id":"61542c48-102f-4d8e-ba9f-c24c64a20d28","name":"Pathway 3"},{"id":"c4ca9575-7353-4c18-b38a-33b383fcd8b2","name":"Pathway 4"}] }); 

Esto carga correctamente Prueba simple de concepto. Ahora trato de reemplazar los datos locales con una llamada a un recurso de servidor:

 $('#mainGrid').jqGrid({ url: 'AJAXHandler.aspx', datatype: 'json', colNames: ['id', 'name'], colModel: [ { name: 'id', index: 'id', width: 100 }, { name: 'name', index: 'name', width: 300 } ], rowNum: 9999, sortname: 'name', viewrecords: true, sortorder: 'asc' }); 

El recurso del servidor devuelve los mismos datos. Pero la grilla no está cargando los datos. (Al menos, no muestra ningún registro.) He confirmado con FireBug que efectivamente se está llamando al recurso y está devolviendo los datos esperados.

Al principio, pensé que el tipo de contenido en la respuesta del recurso debería cambiarse a application/json , pero eso no cambiaba nada. ¿Hay algo más erróneo en esa respuesta que impida que la grilla cargue los datos?

Salida de Firebug para el recurso del servidor:

 Response Headers Cache-Control private Content-Length 261 Content-Type text/html; charset=utf-8 Server Microsoft-IIS/6.0 MicrosoftSharePointTeamSe... 12.0.0.6219 X-Powered-By ASP.NET X-AspNet-Version 2.0.50727 Set-Cookie WSS_KeepSessionAuthenticated=80; path=/ Date Sat, 23 Apr 2011 14:35:43 GMT Request Headers Host cyber0ne.com User-Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16 Accept application/json, text/javascript, */*; q=0.01 Accept-Language en-us,en;q=0.5 Accept-Encoding gzip,deflate Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive 115 Connection keep-alive X-Requested-With XMLHttpRequest Referer http://cyber0ne.com/dovetail_pages/Member/Pathways.aspx?MemberID=b428e0a7-dd55-de11-8e97-0016cfe25fa3 Cookie WSS_KeepSessionAuthenticated=80 Params _search false nd 1303569347783 page 1 rows 9999 sidx name sord asc Response [{"id":"4d4b8249-b5f9-4da6-aba2-bf3af588d560","name":"Pathway 1"},{"id":"230184e6-44cc-4274-97fd-b455440cd9c0","name":"Pathway 2"},{"id":"7f938218-b963-495f-9646-f3cfb1e63ea1","name":"Pathway 3"},{"id":"2b17f23e-5500-4b01-ac1c-df2de90dc511","name":"Pathway 4"}] 

Actualizar:

Por la respuesta de Per @Paul Creasey a continuación, el contenido de la respuesta es ahora:

 {"total":4,"page":1,"records":4,"rows":[{"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"},{"id":"123ba476-1560-4148-ae96-968bdd10e190","name":"Pathway 2"},{"id":"43f5660b-141c-4ccc-848e-6b41667b399a","name":"Pathway 3"},{"id":"b0d21316-d07d-4b46-8011-89c3cb07a8f6","name":"Pathway 4"}]} 

El comportamiento ha cambiado ligeramente. La grilla ahora dice “Cargando” pero aún no carga los datos.

Según los documentos aquí , el formato esperado de json es:

 { "total": "xxx", "page": "yyy", "records": "zzz", "rows" : [ {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, {"id" :"2", "cell":["cell21", "cell22", "cell23"]}, ... ] } 

Por lo tanto, su servicio web debería devolver esto:

 { "total": "4", "page": "1", "records": "4", "rows" : [ { "id": "4d4b8249-b5f9-4da6-aba2-bf3af588d560", "name": "Pathway 1" }, { "id": "230184e6-44cc-4274-97fd-b455440cd9c0", "name": "Pathway 2" }, { "id": "7f938218-b963-495f-9646-f3cfb1e63ea1", "name": "Pathway 3" }, { "id": "2b17f23e-5500-4b01-ac1c-df2de90dc511", "name": "Pathway 4" } ] } 

Por el momento solo tienes el conjunto de filas.

Puede implementar su propia función para leer el JSON, pero nunca lo he hecho, consulte la sección “jsonReader como función” del enlace anterior.


Editar:

Originalmente me equivoqué, o bien debes establecer el indicador repeatitems en falso:

 jsonReader : { repeatitems: false }, 

y use el json anterior (¡creo!) o devuelva datos como este:

 { "total": "4", "page": "1", "records": "4", "rows" : [ { "id": "4d4b8249-b5f9-4da6-aba2-bf3af588d560", "cells" : ["Pathway 1"] }, { "id": "230184e6-44cc-4274-97fd-b455440cd9c0", "cells" : ["Pathway 2"] }, { "id": "7f938218-b963-495f-9646-f3cfb1e63ea1", "cells" : ["Pathway 3"] }, { "id": "2b17f23e-5500-4b01-ac1c-df2de90dc511", "cells" : ["Pathway 4"] } ] } 

Siempre he hecho lo último, ¡pero creo que lo primero es probablemente mejor!

La respuesta de Pablo es absolutamente correcta. Solo debes usar jsonReader : {repeatitems: false} . Decido escribir más información adicional solo para aclarar por qué jqGrid no pudo leer sus datos originales al principio. También deseo describir cómo el parámetro jsonReader puede ayudar a leer datos JSON o XML devueltos por el servidor.

En primer lugar , puede leer casi todos los datos JSON de entrada en jqGrid . Debería definir el parámetro jsonReader que describe cómo deben leerse los datos. Por ejemplo, los datos en su formato original pueden ser leídos por jqGrid con respecto al siguiente jsonReader :

 jsonReader: { repeatitems: false, page: function() { return 1; }, root: function (obj) { return obj; }, records: function (obj) { return obj.length; } } 

Puedes ver en la demostración que la forma realmente funciona. Puede leer más sobre esto en mi respuesta anterior donde sugerí usar funciones como parámetros de jsonReader en situaciones como la juventud.

¿Por qué es necesario proporcionar los datos en forma tan extraña en la respuesta del servidor? ¿Por qué se necesita jsonReader ? La razón es que jqGrid permite que el servidor implemente clasificación , paginación y, opcionalmente, filtrado / búsqueda . Entonces, la solicitud al servidor no es como “por favor consiga la lista de los usuarios”, sino más bien “por favor ordene los usuarios por el apellido y obtenga la página 5ª de los datos donde la página consta de 10 filas “. El tamaño de la página (10 en el caso) se obtendrá del cuadro combinado del localizador jwGrid. El parámetro de matriz rowList define la lista de valores posibles y el usuario puede elegir el tamaño de página que prefiera.

Los datos devueltos deben contener no solo hasta 10 filas solicitadas de los datos, sino también parámetros adicionales: “total”, “página” y “registros” que describen algunos campos que se completarán en el localizador:

enter image description here

Los datos, que forman la cuadrícula contienen, son una matriz de objetos. Todos los elementos de la matriz contienen la información sobre una fila de la grilla. El elemento de matriz puede ser el objeto con propiedades con nombre como

 {"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"} 

o el objeto como

 {"id":"55132687-b0bd-4c89-97cb-122d127429eb", cell:["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]} 

o las matrices como

 ["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"] 

Para leer datos en el primer formato uno debe usar jsonReader:{repeatitems:false} . El segundo formato es el predeterminado y para leer los datos no es necesario definir ningún jsonReader . Para leer datos en el último formato debemos definir jsonReader:{cell:''} y adicionalmente key:true para la columna id . El último formato es el más compacto, pero solo se puede usar si uno de la columna de jqGrid tiene datos únicos que se pueden interpretar como id. La id es importante, porque jqGrid construye una tabla HTML con el elemento

que tiene exactamente la id que una publicación devuelve. No se permiten duplicados de identificación dentro de una página corresponde a las especificaciones HTML.

La última observación. Si no puede o no desea implementar paginación y clasificación por el lado del servidor, debe devolver todos los datos en la respuesta del servidor y usar el parámetro loadonce:true de jqGrid. Esto seguirá a cambiar el parámetro de datatype de datatype de jqGrid a ‘local’ después de la primera carga de datos. Después de eso, la clasificación y paginación de datos se realizará dentro del código JavaScript de jqGrid.

Enfrenté un problema similar en mi proyecto en Firefox. Estoy tratando de cargar datos en jqgrid en la carga de la página. Pero acabo de ver ‘Cargando …’ y no hay datos en la cuadrícula.

Lo resolví en un solo paso. Esto puede sonar tonto, pero esto es exactamente lo que hice para que funcione:

Acabo de comentar la etiqueta en mi que apunta al archivo js: jquery.jqGrid.js , ya que ya tengo otra etiqueta que apunta al archivo js: jquery.jqGrid.min.js

También debe asegurarse de que el orden de sus scripts sea correcto ... primero cargue el jquery y luego los archivos jqgrid.

Esto resolvió mi problema de carga de datos en Firefox.