Reload Grid no funciona para mutiple jqgrid

Estoy usando jqgrid. Mi página tiene tres tabs y cada pestaña contiene una cuadrícula diferente. Todas las cuadrículas tienen diferentes identificaciones. El contenido de las tabs se obtiene a través de la solicitud AJAX perezosamente. Ahora, después de que se hayan procesado las tres cuadrículas e bash recargar la cuadrícula mediante la función

jQuery("#myOffersTable").trigger('reloadGrid'); 

Solo la cuadrícula que se cargó por última vez se recarga y no funciona para otras cuadrículas.

Por ejemplo, si las grillas cargan la secuencia es: 1-2-3, entonces este código solo funcionará para la rejilla 3, pero si la secuencia es 3-2-1, entonces solo funcionará para 1.

Pero si bash volver a cargar las cuadrículas con el botón de recarga en la barra de navegación, funciona bien.

Actualizar:

Estoy usando Struts2 jQuery Plugin. Utiliza jqGrid 3.6.4. Cargo datos json usando ajax.

A continuación se muestra la definición de mi cuadrícula.

 

Tengo tres de esas cuadrículas, todas tienen diferentes identificaciones y todas esas cosas.

Hay un botón de búsqueda sobre cada cuadrícula que llama a la siguiente función con el parámetro sel.sel que es 1,2 o 3 correspondiente a cada cuadrícula

 function search(sel) { alert("search"); if(sel==1) { tradeOffer = $("#games").val(); var srchValue = $("#srchoptions").val(); $.ajaxSetup({ data: {'gameId': tradeOffer}, }); jQuery("#offerstable").jqGrid('setGridParam',{url:"offers.action?q=1&srch="+srchValue,page:1}); //jQuery("#offerstable").trigger('reloadGrid'); $("#offerstable").trigger("reloadGrid"); } else if(sel==2) { myTradeOfferGame = $("#my").val(); $.ajaxSetup({ data: {'gameId': myTradeOffer}, }); jQuery("#myOffersTable").jqGrid('setGridParam',{url:"offers.action?q=1",page:1}); jQuery("#myOffersTable").trigger('reloadGrid'); } else if(sel==3) { acceptedTradeOfferGame = $("#accepted").val(); $.ajaxSetup({ data: {'gameId': acceptedTradeOffer}, }); jQuery("#acceptedtable").jqGrid('setGridParam',{url:"offers.action?q=1",page:1}); jQuery("#acceptedtable").trigger('reloadGrid'); } } 

La función se llama para cada grilla pero

 jQuery("#acceptedtable").trigger('reloadGrid'); 

Funciona solo para rejilla cargada al final.

En primer lugar, en su código, defina las variables myTradeOfferGame y myTradeOfferGame (dentro de else if(sel==2) y else if(sel==3) ), pero use myTradeOffer y acceptedTradeOffer myTradeOffer . Parece errores.

Segundo: las direcciones URL dentro de else if(sel==2) y else if(sel==3) tienen otro aspecto como en la primera tabla: las URL son estáticas, ¿por qué se debe establecer este valor cada vez? Probablemente quieras agregar en todas las URL la parte con $("#srchoptions").val() ? Usted debe solucionar estos problemas a ti mismo.

En su código se puede ver que usa $.ajaxSetup que cambia la configuración global de $.ajax . Si cambias esto 3 veces solo se guardará el último. Si solo uno de cada tres ajustes funciona en una actualización, $.ajaxSetup no es la mejor manera. jqGrid tiene el parámetro ajaxGridOptions , que establece parámetros de $.ajax por tabla (consulte Configuración del tipo de contenido de las solicitudes realizadas por jQuery jqGrid ).

Además, jqGrid (cada instancia) tiene un parámetro postData , que se reenviará a $.ajax como parámetro de data . Así que puedes usar este parámetro en la definición de jqGrid. Si desea que los datos que coloque como postData se postData a cargar durante cada trigger('reloadGrid') , solo puede definir postData usando la función. El comportamiento predeterminado de $.ajax es probar si el campo del parámetro de data es función, es así, $.ajax llama a esta función para obtener el valor. Entonces tu código podría verse como el siguiente:

 // definition of 3 jqGrids jQuery("#offerstable").jqGrid ({ postData: {'gameId': function() { return $("#games").val(); } }, //... }); jQuery("#myOffersTable").jqGrid ({ postData: {'gameId': function() { return $("#my").val(); } }, //... }); jQuery("#myOffersTable").jqGrid ({ postData: {'gameId': function() { return $("#accepted").val(); } }, //... }); if(sel==1) { jQuery("#offerstable") .jqGrid('setGridParam', {url:"offers.action?q=1&srch="+encodeURIComponent($("#srchoptions").val()), page:1}) .trigger('reloadGrid'); } else //... // ... 

Por cierto, si usa HTTP GET para la solicitud de datos, los parámetros del parámetro de data ( postData ) se agregarán a la url (con la colocación de ‘?’ Y ‘&’ como uno, haga esto de manera habitual).

El código final puede ser algo como lo siguiente:

 // definition of 3 jqGrids jQuery("#offerstable").jqGrid ({ url:"offers.action", postData: {'q': 1, 'gameId': function() { return $("#games").val(); }, 'srch': function() { return $("#srchoptions").val(); }, //... }); jQuery("#myOffersTable").jqGrid ({ url:"offers.action", postData: {'q': 1, 'gameId': function() { return $("#my").val(); } }, //... }); jQuery("#myOffersTable").jqGrid ({ url:"offers.action", postData: {'q': 1, 'gameId': function() { return $("#accepted").val(); } }, //... }); 

y

 if(sel==1) { jQuery("#offerstable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid'); } else if (sel==2) { jQuery("#myOffersTable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid'); } else if (sel==3) { jQuery("#acceptedtable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid'); }