JQGrid: Comment puis-je actualiser une liste déroulante après modification?

Question

Dans mon application, j'utilise JQGrid pour charger des données de contacts, et quand j'édite/ajoute une entrée, je sélectionne le nom du contact dans la base de données puis je mets à jour/ajoute un contact.

Mon problème est que, lorsque je clique sur le bouton «Soumettre», je veux rafraîchir la liste déroulante et les données qui ont déjà été saisies dans la liste déroulante.

Mon code:

pour colModel:

{ name: 'OwnerEmail', index: 'OwnerEmail', width: 200, align: "center", sortable: true, sorttype: 'text', editable: true, edittype: 'select', editrules: { required: true }, editoptions: { value: ownersList} }, 

Je peuplent le menu déroulant de sélection de la ligne (que lorsque je sélectionne une ligne, le menu déroulant sera mise à jour)

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} }); 
      } 

Mais Lorsque j'entre à nouveau le formulaire d'édition/ajout, le menu déroulant n'est pas actualisé, il contient les éléments qui ont été chargés en premier lieu.

Une aide?

Merci, Jeff

Answer 1

je pense que ce sera mieux si vous utilisez dataUrl propriété du editoptions au lieu de la propriété d'utilisation value. Dans le cas où vous n'auriez pas besoin d'utiliser l'appel Ajax synchrone à l'intérieur de onSelectRow pour obtenir les données de sélection manuellement. Si les données seront nécessaires, l'appel correspondant fera jqGrid pour vous.

L'URL de dataUrl doit renvoyer le fragment HTML pour l'élément <select> incluant tous les <options>. Vous pouvez donc convertir n'importe quelle autre réponse de dataUrl au format requis en implémentant la fonction de rappel buildSelect correspondante.

Sur votre site, je préférerais renvoyer les données JSON de l'URL 'MyWebService.asmx/GetOwners' au lieu des données XML que vous avez actuellement. Dans le cas le plus simple, il pourrait être la méthode web comme

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public List<string> GetSelectData() { 
    return new List<string> { 
     "User1", "User2", "User3", "User4" 
    }; 
} 

Si vous utilisez HTTP GET au lieu de HTTP POST, vous devez éviter l'utilisation des données à partir du cache en définissant Cache-Control: private, max-age=0 dans l'en-tête HTTP. le code correspondant sera

[WebMethod] 
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] 
public List<string> GetSelectData() { 
    HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0)); 
    return new List<string> { 
     "User1", "User2", "User3", "User4" 
    }; 
} 

Par défaut jqGrid utiliser dataType: "html" dans l'appel Ajax correspondant (voir the source code). Pour changer le comportement à dataType: "json", contentType: "application/json" vous devez utiliser en plus le paramètre ajaxSelectOptions de jqGrid comme

ajaxSelectOptions: { contentType: "application/json", dataType: 'json' }, 

ou

ajaxSelectOptions: { 
    contentType: "application/json", 
    dataType: 'json', 
    type: "POST" 
}, 

si vous utilisez HTTP POST qui est par défaut pour les services Web ASMX.

Le réglage correspondant de la colonne dans la colModel sera

edittype: 'select', editable: true, 
editoptions: { 
    dataUrl: '/MyWebService.asmx/GetSelectData', 
    buildSelect: buildSelectFromJson 
} 

où

var buildSelectFromJson = function (data) { 
     var html = '<select>', d = data.d, length = d.length, i = 0, item; 
     for (; i < length; i++) { 
      item = d[i]; 
      html += '<option value=' + item + '>' + item + '</option>'; 
     } 
     html += '</select>'; 
     return html; 
    }; 

Faites attention que l'utilisation de code ci-dessus data.d qui est nécessaire dans le cas des services Web ASMX. Si vous souhaitez migrer vers ASP.NET MVC ou vers WCF, vous devrez supprimer l'utilisation de la propriété d et utiliser directement data.

MIS À JOUR: Here Vous pouvez télécharger le projet de démonstration VS2010 qui implémente ce que j'ai écrit ci-dessus.