Cuando se usa jqgrid, ¿hay de todos modos tener recreateForm: true pero también cache dataUrl?

Tengo las siguientes columnas usando jqGrid (simplificado)

{ name: "PMOPerson", index: "PMOPerson", width: 250, editable: true, edittype: "select", editoptions: { dataUrl: "/Person/GetSelectData" }, editrules: { required: false} }, { name: "HeadDisplayName", index: "HeadDisplayName", width: 150, editable: false }, 

cuando voy a editar una fila al abrir el cuadro de diálogo de edición, demora 10 segundos en completarse el menú desplegable de PMOPerson. Este es el caso incluso después de que ya lo haya cargado una vez antes y asumo que es porque tengo recreateForm: true a continuación

  addButton({ caption: "", title: "Edit Selected Team", buttonicon: 'ui-icon-pencil', onClickButton: function () { var id = $("#grid").getGridParam("selrow"); if (id) { jQuery("#grid").jqGrid('editGridRow', id, { url: '/OrganisationalUnit/Update', afterSubmit: function (response, postdata) { var responseJson = $.parseJSON(response.responseText); return HandleJqGridResponse(responseJson); }, height: 380, width: "auto", recreateForm: true, closeAfterEdit: true, closeOnEscape: true, reloadAfterSubmit: true }); } }, position: "second" }); 

Estoy tratando de averiguar si hay una manera en la que ambos puedan recrearse: verdadero, pero aún así, también caché la lista de elementos en dataUrl para evitar volver al servidor cada vez que edito una fila.

Respondí en preguntas muy cercanas aquí y aquí . En otras palabras, puede usar las opciones de almacenamiento en caché del encabezado HTTP o usar editoptions.value lugar de editoptions.dataUrl .

Describí en la respuesta y en esta dos anteriores ( esto y esto ) cómo se puede establecer editoptions.value dinámicamente dentro de la callback beforeProcessing del beforeProcessing . Es necesario extender las respuestas del servidor utilizado para llenar la cuadrícula con información adicional (con los datos como los datos devueltos de editoptions.dataUrl ). En mi opinión, implementa el mejor compromiso entre el almacenamiento en caché de datos editoptions.dataUrl y la actualización de los datos mediante la recarga de la cuadrícula. Todavía se pueden mantener datos editoptions.dataUrl caché en el lado del servidor .

Alternativamente, se puede usar una forma más simple donde se realiza una solicitud Ajax manual para editoptions.dataUrl una vez después de crear la cuadrícula y se puede establecer editoptions.value dentro de la callback editoptions.value ( done ) de la solicitud Ajax. El código será sobre los siguientes

 // create grid $("#grid").jqGrid({ colModel: [ { name: "PMOPerson" }, ... ], ... }); // make separate asynchronous Ajax request to the server and set // edittype: "select", editoptions: { value: ... } setSelectOptionValues("/Person/GetSelectData", $("#grid"), "PMOPerson"); 

El código de setSelectOptionValues depende del formato de los datos JSON que utiliza para comunicarse con la URL como "/Person/GetSelectData" . Por ejemplo, si el servidor solo devuelve una matriz de cadenas que debe ser el texto y el valor de las opciones de entonces podría ser la siguiente

 var setSelectOptionValues = function (getJsonUrl, myGrid, colModelColumnName) { $.getJSON( getJsonUrl, function (data) { var i, selectedOptions = '', datai, dn, colModelColumn; for (i = 0; i < data.length; i += 1) { if (i > 0) { selectedOptions += ';'; } else { selectedOptions = ""; } datai = data[i]; if (typeof datai === 'string') { selectedOptions += datai; selectedOptions += ':'; selectedOptions += datai; } } myGrid.jqGrid("setColProp", colModelColumnName, { edittype: "select", editoptions: { value: selectedOptions } }); } ); }; 

La configuración de editoptions.value se realizará de forma asíncrona dentro de setSelectOptionValues . Por lo tanto, puede que la cuadrícula se llene antes de que se establezca editoptions.value . En el otro lado, editoptions.value se utilizará solo durante la edición . El tiempo de respuesta de "/Person/GetSelectData" suele ser lo suficientemente rápido y el valor editoptions.value se establecerá antes de que el usuario comience la edición. Si quieres estar absolutamente seguro de que puedes mantener editoptions.dataUrl . En el caso, se utilizará editoptions.dataUrl solo si el usuario responde rápidamente al servidor con "/Person/GetSelectData" . Puedes cambiar la llamada explícita de

 setSelectOptionValues("/Person/GetSelectData", $("#grid"), "PMOPerson"); 

con obtener colModel usando getGridParam , el bucle a través de todos los elementos colModel y la llamada a setSelectOptionValues para todos los elementos que tienen editoptions.dataUrl .

La principal restricción del último enfoque: no puede usar el formatter: "select" (solo edittype: "select" solamente). Si rellena los datos de la cuadrícula con los identificadores y editoptions.value o formatoptions.value proporciona el mapeo de los identificadores a los textos, entonces le recomendaría que utilice el primer enfoque con el beforeProcessing callback.