En mi aplicación, uso JQGrid para cargar algunos datos de contactos, y cuando edito / agrego una entrada selecciono el nombre del contacto de la base de datos y luego actualizo / agregué el contacto.
Mi problema es que, cuando hago clic en el botón Enviar, quiero actualizar el menú desplegable y los datos que ya se han ingresado para disparar desde la lista desplegable.
Mi código:
para colModel:
{ name: 'OwnerEmail', index: 'OwnerEmail', width: 200, align: "center", sortable: true, sorttype: 'text', editable: true, edittype: 'select', editrules: { required: true }, editoptions: { value: ownersList} }, Completo el menú desplegable en la fila de selección (que cuando seleccione una fila, el menú desplegable se actualizará)
onSelectRow: function (id) { var advOwners = $.ajax({ type: 'POST', data: {}, url: 'MyWebService.asmx/GetOwners', async: false, error: function () { alert('An error has occured retrieving Owners!'); } }).responseXML; var aux = advOwners.getElementsByTagName("string"); ownersList = ""; for (var i = 0; i < aux.length; i++) { ownersList += aux[i].childNodes[0].nodeValue + ':' + aux[i].childNodes[0].nodeValue + '; '; } ownersList = ownersList.substring(0, ownersList.length - 2); jQuery("#GridView").setColProp('OwnerEmail', { editoptions: { value: ownersList} }); }
Pero cuando ingreso nuevamente el formulario de edición / adición, el menú desplegable no se actualiza, tiene los elementos que se han cargado en primer lugar.
¿Alguna ayuda?
Gracias, Jeff
Creo que será mejor si dataUrl propiedad dataUrl de editoptions en lugar de la propiedad del value de uso. En este caso, no será necesario utilizar la llamada síncrona Ajax dentro de onSelectRow para obtener los datos seleccionados manualmente. Si los datos serán necesarios, la llamada correspondiente hará jqGrid por usted.
La URL de dataUrl debe devolver el fragmento de HTML para el elemento , incluidas todas las dataUrl al formato requerido implementando la función de callback buildSelect correspondiente.
En su lugar, preferiría devolver los datos de JSON de la URL ‘MyWebService.asmx / GetOwners’ en lugar de los datos XML que usted hace actualmente. En el caso más simple, podría ser un método web como
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public List GetSelectData() { return new List { "User1", "User2", "User3", "User4" }; }
Si utiliza HTTP GET en lugar de HTTP POST, debe evitar el uso de datos de la caché configurando Cache-Control: private, max-age=0 en el encabezado HTTP. el código correspondiente será
[WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public List GetSelectData() { HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0)); return new List { "User1", "User2", "User3", "User4" }; }
Por defecto, jqGrid usa dataType: "html" en la llamada Ajax correspondiente (ver el código fuente ). Para cambiar el comportamiento a dataType: "json", contentType: "application/json" , debe usar adicionalmente el parámetro ajaxSelectOptions de jqGrid as
ajaxSelectOptions: { contentType: "application/json", dataType: 'json' },
o como
ajaxSelectOptions: { contentType: "application/json", dataType: 'json', type: "POST" },
si usará HTTP POST, que es el predeterminado para los servicios web ASMX.
La configuración correspondiente para la columna en el colModel será
edittype: 'select', editable: true, editoptions: { dataUrl: '/MyWebService.asmx/GetSelectData', buildSelect: buildSelectFromJson }
dónde
var buildSelectFromJson = function (data) { var html = ''; return html; };
Tenga cuidado de que el código anterior use data.d que se requiere en el caso de servicios web ASMX. Si desea migrar a ASP.NET MVC o WCF, necesitará eliminar el uso de la propiedad d y usar los data directamente.
ACTUALIZADO : Aquí puede descargar el proyecto de demostración VS2010 que implementa lo que escribí anteriormente.