jquery - bootstrap - jqgrid github

¿Debería uno reemplazar el uso addJSONData de jqGrid por el uso de setGridParam() y trigger(''reloadGrid'')? (6)

Hace poco escribí una respuesta a la pregunta " jqGrid display default" loading "al actualizar una tabla / en una actualización personalizada ". Mientras escribía la respuesta, pensé: ¿por qué usa la función addJSONData () para refrescar datos en la cuadrícula en lugar de cambiar la URL con respecto a setGridParam () y refrescar los datos de jqGrid con respecto al disparador (''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.

Entonces 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 las entradas de los usuarios adicionales, podemos actualizar el contenedor jqGrid al menos de dos maneras:

Realice la llamada del manual $.ajax() y luego dentro del jQuery.parseJSON() success o complete de $.ajax llame a jQuery.parseJSON() (o eval ) y luego llame a la función addJSONData de jqGrid. Encontré muchos ejemplos en stackoverflow.com que usan addJSONData .
Actualiza la url de jqGrid en función de la entrada del usuario, restablece el número de página actual a 1 y opcionalmente cambia el título de la grilla. Todo esto se puede hacer con respecto a los métodos setGridParam () y opcionalmente setCaption () jqGrid. Al final, llama a la función de activación de la cuadrícula (''reloadGrid'') . Para construir la url , por cierto uso principalmente la función jQuery.param para asegurarme de 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 addJSONData . ¡Esta es la razón por la que uso el método addJSONData !

OK, 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 eliminar o renombrar cualquier parámetro estándar enviado al servidor con respecto a la opción prmNames de jqGrid o agregar más parámetros adicionales con respecto a la opción postData (ver http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options ). Se pueden modificar todos los parámetros construidos inmediatamente antes de que jqGrid haga la solicitud $.ajax correspondiente 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 opción ajaxGridOptions , uno puede redefinir cualquier parámetro del envío de solicitudes $.ajax por jqGrid, como error , completar y antes de enviar 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 método trigger (''reloadGrid'') es el bloqueo de jqGrid durante el procesamiento de la 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/ uno puede bloquear más partes de la página web como solo la cuadrícula. Para hacer esto uno puede llamar:

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

antes de llamar al método trigger (''reloadGrid'') y jQuery (''# main''). unblock () dentro de las funciones loadComplete y loadError . La opción loadui podría establecerse en ''deshabilitar'' en este caso.

Y mi última observación: Mayormente solía crear jqGrid con el tipo de datos establecido en ''local'' en lugar de ''json'' y llamaba a la función de activación (''cambio'') de algunos de los controles (uno de los comboboxes) como: jQuery("#selector").change(myRefresh).keyup(myKeyRefresh).trigger(''change'') . Por lo tanto, construyo el parámetro url de jqGrid solo en un lugar dentro del identificador de cambio y cambio el tipo de datos a ''json'' dentro del setGridParam () descrito anteriormente.

Así que no veo por qué la función addJSONData () debería usarse alguna vez.

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

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

Cuando necesite tener control completo sobre cómo y cuándo se envía el ajax, preferirá usar addJSONData .

Por ejemplo, un formulario de búsqueda contiene dos cuadros <select> , ambos ajaxly poblados, el valor de la primera select afectaría al segundo. Es posible que el usuario haya establecido un valor predeterminado para los cuadros de select . Y desea buscar en la cuadrícula solo después de que se definan los dos valores.

Entonces es 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 json , y luego reloadGrid para controlar la activación. Pero simplemente no es ese trival.

Estoy usando addJSONData para la mejora del rendimiento en la página. Aquí está mi caso de uso

Tengo 4 jqGrids en la página. El método de recuperación de datos es el mismo para las 4 cuadrículas, pero las columnas y filas son diferentes en cada cuadrícula. Entonces, en lugar de hacer 4 llamadas al servidor para completar los datos en cada cuadrícula, realizo una llamada que devuelve datos JSON adicionales para las otras 3 cuadrículas. Y en el evento "loadComplete" de la primera grilla, separé los datos para cada una de las otras 3 grillas y los cargaré individualmente. Aquí hay una versión recortada del evento loadComplete de la primera grilla

loadComplete:function (data) { //clear and reload area summary table var areaSummary = data.areaSummary; jQuery("#areaSummaryTable").jqGrid(''clearGridData''); jQuery("#areaSummaryTable")[0].addJSONData(areaSummary); //clear and reload area total table var areaTotal = data.areaTotal; jQuery("#areaTotalTable").jqGrid(''clearGridData''); jQuery("#areaTotalTable")[0].addJSONData(areaTotal); //clear and reload area detail table jQuery("#detailedAreaTable").jqGrid(''clearGridData''); var areaDetail = data.areaDetail; jQuery("#detailedAreaTable")[0].addJSONData(areaDetail); }

Esto ha funcionado muy bien durante las últimas 2 semanas hasta que noté que al cargar la página, cada una de las 3 cuadrículas realizaba llamadas al servidor a una URL aleatoria. La razón de esto resultó ser porque el tipo de datos para estas cuadrículas se definió como ''json''. Si cambio el tipo de datos a ''local'', no se hacen llamadas al servidor desde esta grilla, pero el método addJSONData en el código anterior deja de funcionar. Intenté usar "setGridParam" para cambiar el tipo de datos a ''json'' antes de usar addJSONData como a continuación, pero esto tampoco funciona.

jQuery("#areaSummaryTable").jqGrid(''clearGridData''); jQuery("#areaSummaryTable").jqGrid(''setGridParam'', {datatype:''json''}); jQuery("#areaSummaryTable")[0].addJSONData(areaSummary);

Espero que haya una manera fácil de convertir los datos a una matriz y usar addRowData :) Avíseme si hay una mejor manera de manejar ese caso de uso

Facilidad de construcción de grilla / 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.

Entonces, 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 -> datagrid eficaz cliente-servidor

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

En mi caso, tengo una página que contiene la cuadrícula de datos y otra página que se usa para crear 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.

Por lo que sé, la única forma de obtener los datos JSON de la respuesta HTTP en la grilla es usando addJSONData ().

Chris

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

De todos modos, necesitaba una manipulación de la interfaz gráfica de usuario pesada y compleja en el lado del cliente (cosas para compartir en el banco), mis datos Json eran solo locales y enviados al servidor como un punto clave (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.

La 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 sido feliz de encontrar este gancho de addJSONData y tener mi propia línea de tiempo de Ajax fuera de jQgrid.

Utilizo el método addJSONData para el propósito de paginación como se explica a continuación.

En la carga de la página, jqgrid se carga con los datos JSON devueltos por URL. Necesitamos la funcionalidad de la página siguiente para que funcione, pero sin tener que cambiar las páginas. es decir, inicialmente, la página 1 se carga con, por ejemplo, 10 registros. Cuando hago clic en el botón Siguiente (NavButton), en lugar de cargar los próximos 10 registros en la página siguiente, quiero que se muestren los 20 registros en la página 1.

Aquí, en la segunda solicitud y posteriores, estoy usando el método addJSONData. Hago una llamada ajax al hacer clic en el botón Siguiente y luego uso addJSONData para anexar los datos json a los 10 registros existentes. No puedo usar setGridParam porque cuando lo uso, los 10 registros iniciales se han ido y solo carga los siguientes 10 registros en la misma página.

Si tiene alguna alternativa para addJSONData para esta funcionalidad particular, estaré encantado de saberlo. Como estoy enfrentando problemas con la expansión de la Subgrid, la barra de herramientas de filtro, etc., cuando se carga el siguiente conjunto de registros usando addJSONData.