jQuery cargando datos en jqGrid

Question

Soy un usuario por primera vez de jqGrid, hasta ahora fui a través de ejemplos oficiales, estoy interesado en cargar datos en la cuadrícula usando json.

estoy mirando, los datos de carga y descarga (datos JSON): http://trirand.com/blog/jqgrid/jqgrid.html

Aquí es un poco de Javascript que crea cuadrícula:

jQuery("#list2").jqGrid(
    { 
     url : '<c:url value="${webappRoot}/getdetails" />', 
     datatype : "json", 
     colNames : [ 'id', 'Location', 'Country Code', 'Type', 'Interval', 
        'Version', 'Last Active', 'Last Login', 'NOTE' ], 
     colModel : [ 
      { name : 'id', width : 10 }, 
      { name : 'location', width : 75 }, 
      { name : 'countryCode', width : 50 }, 
      { name : 'type', width : 40 }, 
      { name : 'interval', width : 30 }, 
      { name : 'version', width : 45 }, 
      { name : 'lastactive', width : 50, align : "right" }, 
      { name : 'lastlogin', width : 50, sortable : false }, 
      { name : 'note', width : 50, sortable : false} 
     ], 
     rowNum : 10, 
     rowList : [ 10, 20, 30 ], 
     pager : '#pager2', 
     width: gridWidth, 
     sortname : 'id', 
     viewrecords : true, 
     sortorder : "desc", 
     caption : "JSON Example" 
}); 
jQuery("#list2").jqGrid('navGrid', '#pager2', 
         { edit : false, add : false, del : false}); 

${webappRoot}/getdetails transforma camino a mi proyecto como http://localhost/myProject/getdetails, Estoy usando Spring MVC (podría ser irrelevante).

Cuando miro en el quemador, este genera esta petición http:

GET http://localhost/newProject/getdetails?_search=false&nd=1304638787511&rows=10&page=1&sidx=id&sord=desc 
200 OK 
135ms 

Aquí está la respuesta:

{ 
    "id": 1, 
    "location": "office_2782", 
    "countryCode": "UK", 
    "quarter": "500", 
    "version": "v3.05", 
    "lastactive": "yesterday", 
    "lastlogin": "today", 
    "note": "no note", 
    "type": "read-only" 
} 

Cuando navego a la pestaña JSON todo parece igual que éste, alguna idea de lo Estoy haciendo mal?

Estoy tratando de cargar solo un registro para empezar, y no puedo hacer que funcione, cualquier ayuda es solicitada.

Answer 1

En primer lugar, no es la primera persona que tiene problemas para comprender cómo se deben construir los datos JSON, qué significan los parámetros enviados desde jqGrid al servidor, etc. The official jqGrid documentation no contiene suficiente introducción, por lo que los primeros pasos del uso de jqGrid pueden ser un poco más difíciles de lo que cabría esperar.

El problema que existe en su respuesta JSON desde el servidor es que que contiene sólo un elemento de datos en lugar de una matriz (o lista) de elementos que representan las filas de cuadrícula. Los datos deben ser al menos

[ 
    { 
     "id": 1, 
     "location": "office_2782", 
     "countryCode": "UK", 
     "quarter": "500", 
     "version": "v3.05", 
     "lastactive": "yesterday", 
     "lastlogin": "today", 
     "note": "no note", 
     "type": "read-only" 
    } 
] 

o mejor como

{ 
    "total": 1, 
    "page": 1, 
    "records": 1, 
    "rows": [ 
     { 
      "id": 1, 
      "location": "office_2782", 
      "countryCode": "UK", 
      "quarter": 500, 
      "version": "v3.05", 
      "lastactive": "yesterday", 
      "lastlogin": "today", 
      "note": "no note", 
      "type": "read-only" 
     } 
    ] 
} 

o incluso como

{ 
    "total": 1, 
    "page": 1, 
    "records": 1, 
    "rows": [ 
     { 
      "id": 1, 
      "row": [ "1", "office_2782", "UK", "500", "v3.05", 
        "yesterday", "today", "no note", "read-only" ] 
     } 
    ] 
} 

o

{ 
    "total": 1, 
    "page": 1, 
    "records": 1, 
    "rows": [ 
     [ "1", "office_2782", "UK", "500", "v3.05", "yesterday", "today", 
      "no note", "read-only" ] 
    ] 
} 

La razón de tan extraño a primera vista La información de JSON es que jqGrid es de firmado para admitir paginación, clasificación y filtrado/búsqueda de datos implementados en el servidor. Entonces, los parámetros rows=10&page=1&sidx=id&sord=desc de la url enviada al servidor significan que jqGrid le pide al servidor que obtenga la primera página (página = 1) de los datos con la página que tiene 10 filas por página (filas = 10). Los datos se deben ordenar previamente por id (sidx = id) en orden descendente (sord = desc). Si tiene un número pequeño de filas (por ejemplo, bajo hundert) puede usar la clasificación, paginación y filtrado basado en el cliente si agrega el parámetro loadonce:true de jqGrid, pero la implementación basada en servidor le permite trabajar con un conjunto de datos realmente grande que tiene muchos cientos de miles filas de datos con muy buen rendimiento.

Le recomiendo que lea mi this answer donde traté de explicar cómo se usarán los elementos adicionales de la respuesta del servidor "total", "página" y "registros". Los valores de los parámetros se pueden codificar en JSON como números o como cadenas (según su gusto).

Si el usuario hace clic en el encabezado de columna de la columna 'ubicación', por ejemplo jqGrid enviarán nueva petición al servidor tener sidx=location&sord=asc en la url. Por lo tanto, es importante comprender que se puede pedir al servidor que proporcione los datos de la cuadrícula no una vez por cuadrícula, sino muchas veces, y la solicitud contendrá algunos parámetros elegidos por el usuario que trabaja con jqGrid.

Definición de jsonReader (y, a veces, jsonmap parámetros adicionales para cada columna) describe la estructura de la respuesta del servidor. Usando la información jqGrid lee la respuesta y llena la grilla.

The demo muestra que con el correspondiente jsonReader se puede leer incluso sus datos JSON originales.

El último consejo para mí sería considerar al comienzo el uso del identificador de evento loadError que ayuda a informar al usuario sobre los errores informados por el servidor. En the answer, he mostrado cómo se puede implementar en el caso de ASP.NET MVC. No uso spring MVC por mí mismo, así que no puedo darle ejemplos directos de cómo implementar mejor los informes de errores en Spring MVC, pero la idea principal es la misma en cualquier tecnología de servidor: en caso de errores, el servidor debe responder con la respuesta tiene un error HTTP status code. Dentro de la implementación del identificador de evento loadError decodifica la respuesta y muestra la información sobre el error.