2010-04-17 12 views
28

Escribí recientemente una respuesta a la pregunta "jqGrid display default “loading” message when updating a table/on custom update". Mientras escribía la respuesta que pensé: ¿por qué usa el addJSONData() función para actualizar los datos en la red en lugar de cambiar la dirección URL con respecto a setGridParam() y jqGrid refrescante datos con respecto a gatillo ('reloadGrid')? Al principio, quería recomendar el uso de 'reloadGrid', pero después de pensar en esto comprendí que no estoy seguro de cuál es la mejor manera. Al menos, no puedo explicar en dos oraciones por qué prefiero la segunda forma. Entonces decidí que podría ser un tema interesante de discusión.¿Debería uno reemplazar el uso addJSONData de jqGrid por el uso de setGridParam() y trigger ('reloadGrid')?

Para ser exactos: tenemos una situación típica. Tenemos una página web con al menos un jqGrid y algunos otros controles como cuadros combinados (selectores), casillas de verificación, etc. que le dan al usuario la posibilidad de cambiar el alcance de la información que se muestra en un jqGrid. Normalmente definimos algún controlador de eventos como jQuery("#selector").change(myRefresh).keyup(myKeyRefresh) y tenemos que volver a cargar el contenedor jqGrid en función de las opciones del usuario.

Después de leer y analizar la información de entrada del usuario adicional podemos refrescar el contenedor jqGrid en por lo menos dos maneras:

  1. llamada Marca de $.ajax() manual y luego dentro del éxito o el asa completa de $.ajax llamada jQuery.parseJSON() (o eval) y luego llamar a addJSONData función de jqGrid. Encontré muchos ejemplos en stackoverflow.com que usan addJSONData.
  2. actualización url de jqGrid basada en la entrada del usuario, restablecimiento actual número página a 1 y opcionalmente cambiar el subtítulo de la parrilla. Todo esto se puede hacer con respecto a setGridParam(), y opcionalmente setCaption() métodos jqGrid. Al final, llame a la función de activación de la cuadrícula ('reloadGrid'). Para construir el url, por cierto uso principalmente la función jQuery.param para estar seguro, que tengo todos los parámetros url empaquetados correctamente con respecto a encodeURIComponent.

Me gustaría que analicemos las ventajas y desventajas de ambas maneras. Actualmente uso la segunda forma, así que comenzaré con las ventajas de esta.

Se puede decir: llamo al servicio web existente, convierto los datos recibidos al formato jqGrid y llamo al addJSONData. ¡Esta es la razón por la que uso el método addJSONData!

Bien, elegiré otra forma. jqGrid puede hacer una llamada directamente al Servicio Web y completar los resultados dentro de la grilla. Hay muchas opciones de jqGrid, que le permiten personalizar este proceso.

En primer lugar, se puede borrar o cambiar el nombre de cualquier parámetro estándar enviado al servidor con respecto a los prmNames opción de jqGrid o añadir cualquier parámetro más adicionales con respecto a la opción de Postdatum(ver http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options).Se pueden modificar todos los parámetros construidos inmediatamente antes de que jqGrid realice la solicitud correspondiente $.ajax definiendo la función serializeGridData() (una opción más de jqGrid). Más que eso, se puede cambiar cada parámetro $.ajax estableciendo la opción ajaxGridOptions de jqGrid. Yo uso ajaxGridOptions: {contentType: "application/json"} por ejemplo como una configuración general de $.jgrid.defaults. La opción ajaxGridOptions es muy poderosa. Con respecto a la ajaxGridOptions opción se puede redefinir cualquier parámetro de $.ajax envío por jqGrid solicitud, como error, completa y beforeSend eventos. Considero potencialmente interesante definir el evento dataFilter para poder realizar cualquier modificación de los datos de fila devueltos por el servidor.

Un argumento más para el uso del disparador ('reloadGrid') es el bloqueo de jqGrid durante el procesamiento de solicitud AJAX. Sobre todo, utilizo el parámetro loadui: 'block' para bloquear jqGrid durante el envío de la solicitud JSON al servidor. Con respecto al complemento jQuery blockUI http://malsup.com/jquery/block/, se pueden bloquear más partes de la página web solo como cuadrícula. Para ello se puede llamar:

jQuery('#main').block({ message: '<h1>Die Daten werden vom Server geladen...</h1>' }); 

antes de llamar al gatillo ('reloadGrid') método y jQuery ('# principal') desbloquear() dentro del LoadComplete y LoadError funciones. . La opción loadui podría configurarse como 'deshabilitar' en este caso.

Y mi última observación: Mayormente he usado para crear jqGrid con el tipo de datos conjunto de 'local' en lugar de 'json' y que yo llamaría el gatillo ('cambio') función de algunos de los controles (una de las cajas combinadas) como: jQuery("#selector").change(myRefresh).keyup(myKeyRefresh).trigger('change'). Así construyo la url parámetro de jqGrid sólo en un lugar en el interior de la empuñadura cambio y el cambio tipo de datos a 'json' dentro de la setGridParam descrito anteriormente().

Así que no veo por qué la función addJSONData() se debe utilizar alguna vez.

¿Alguien que use addJSONData() función me explique las ventajas de su uso?

Para ser justos puedo añadir que addJSONData() que existe en las versiones anteriores de jqGrid por tener la mayor parte de las características que describo aquí. ¿Debería uno reemplazar el uso de addJSONData de jqGrid para el uso de setGridParam() y trigger ('reloadGrid')?

Respuesta

0

He aquí por qué utilizo addJSONData() ...

En mi caso, tengo una página que contiene la cuadrícula de datos, y otra página que se utiliza para construir criterios de búsqueda.

La página de búsqueda, que no sabe nada sobre la página de la cuadrícula, contiene siete campos. El usuario puede completar al menos uno o los siete campos.

Cuando se envía, la página de búsqueda formatea los datos como pares clave/valor en un objeto JSON que se envía al servidor.

En el servidor, los datos JSON se analizan en una cláusula SQL WHERE.

Los resultados de los datos SQL se envían al cliente como un objeto JSON en la respuesta HTTP que también crea la página de la cuadrícula a partir del código enviado desde el servidor.

Hasta donde yo sé, la única forma de obtener los datos JSON de la respuesta HTTP en la cuadrícula es mediante addJSONData().

Chris

+0

@ user43244: Como describo en mi pregunta, 'addJSONData' no es la única forma de obtener datos JSON del servidor. Puede definir 'datatype:" json "' parámetro de jqGrid y jqGrid le enviará la solicitud al servidor si necesita los datos (en caso de cambio de página, cambio de orden y para el primer llenado, de causa). Algunas veces (depende del software del servidor) necesitará usar 'ajaxGridOptions' para establecer parámetros ajax adicionales. Lo que usted hace se discute en http://stackoverflow.com/questions/2928371/how-to-filter-the-jqgrid-data-not-using-the-built-in-search-filter-box/2928819#2928819. – Oleg

+0

Incluso tenemos un requisito como este. Por favor, consulte http://stackoverflow.com/questions/7587255/using-jggrid-with-apiproviding-local-data-for-search-paging y háganos saber cómo podemos evitar el uso de 'addJSONData' – CodeRain

2

He estado usando addJSONData con jqGrid, pero fue hace 1 año, muchas cosas tienen cambios desde ese momento en jqGrid.

De todos modos, necesitaba una manipulación compleja de GUI & en el lado del cliente (cosas para compartir en el banco), mis datos Json eran solo locales y enviados al servidor como un jkey point (trabajo terminado). Tenía varios jqgrid (algunos de ellos dentro de otros jqgrids :-)) y algún tipo de almacenamiento local de datos del navegador que era lo suficientemente pequeño como para permanecer en el navegador y ser lo suficientemente complejo y móvil como para ser inutilizable en un tiempo razonable a través de ajax IO.

Primera versión usaba Ajax IO, cuando me golpearon las cerraduras y los problemas de espera y por la cantidad de nuevas y complejas cosas de la interfaz gráfica de usuario, he estado muy contento de encontrar este gancho de addJSONData y tener mi propia línea de tiempo de AJAX fuera de jQgrid.

1

Facilidad de construcción de la cuadrícula/datos de un servidor. Una de las principales razones por las que uso JSON es que es más pequeño que XML, y funciona bien tanto en el servidor (PHP) como en el cliente (JS). Y como resultado, estandaricé (y sé que muchos lo hacen) la transmisión de datos entre JSON.

Por lo tanto, addJSONData proporciona una forma sencilla de actualizar constantemente todos los datos en la grilla, y mostrarlos en una sola toma. Es rápido, rápido, sucio y funciona.

Sin embargo, personalmente, esta será una mala idea a largo plazo, con una gran cuadrícula de datos constantemente refrescante. Y ahí es donde, las actualizaciones de celdas/columnas específicas, después de la obtención inicial, es una idea mucho mejor para tener 2 llamadas. Envíe el cambio de cuadrícula al servidor y obtenga los cambios del servidor.

Una de las principales ventajas de hacer esto es que es un comienzo rápido. Y cuando los datos son demasiado grandes, las degradaciones de la opción Agregar todo se producen solo una vez al inicio. Si bien se pueden agregar actualizaciones/get individuales, después de la captura de datos inicial.

Es un buen ciclo de trabajo: prototipo rápido -> Cuadrícula de datos cliente-servidor eficaz

+1

Gracias por su respuesta. Mi pregunta es ** muy vieja **.Tenía 60 puntos de reputación en ese momento. El jqGrid ya tenía las opciones 'ajaxGridOptions' y' serializeGridData', pero había muchos ** ejemplos antiguos ** de la época de las versiones anteriores cuando el envío de datos codificados JSON al servidor no era compatible directamente. Así que escribí la pregunta para ayudar a otros a usar las características nuevas (en ese momento). Si ahora usa 'addJSONData', normalmente ignora la clasificación, la paginación y el filtrado. Intenta hacer clic en el encabezado de la columna en tu "prototipo". Si publica su ejemplo de código, le mostraría cómo modificarlo. Se mantendrá simple – Oleg

0

Cuando es necesario tener un control completo sobre cómo y cuando el Ajax se envía, se prefiere utilizar addJSONData.

p. Ej. Un formulario de búsqueda contiene dos cajas <select>, ambas ajaxly pobladas, el valor del primer select afectaría al segundo. Es posible que el usuario haya establecido un valor predeterminado para los cuadros select. Y desea buscar en la cuadrícula solo después de que se definan los dos valores.

Es entonces más preferible usar cosas como $.Deferred para controlar el orden de las llamadas ajax que se realizan y completan. Por supuesto, puede establecer los datos de jqgrid como local, luego en json, y luego reloadGrid para controlar la activación. Pero simplemente no es ese trival.

+0

Lo sentimos, pero su ejemplo se trata de buscar formulario o editar formulario en lugar de llenar el cuerpo de la cuadrícula. El método 'addJSONData' no puede ayudar en caso de implementación de selecciones dependientes. – Oleg

+0

Los '' y desea filtrar los datos de la cuadrícula en el servidor según la opción '