JQGrid Inline Editing: liste déroulante Filtrer les sous-catégories en fonction d'une autre catégorie déroulante

Question

J'ai une catégorie et une colonne de sous-catégorie dans un Jqgrid. J'ai activé l'édition en ligne, la catégorie et la sous-catégorie sont des listes déroulantes (edittype: 'select'). J'ai besoin de filtrer la liste de sous-catégorie en fonction de la catégorie sélectionnée. Je me demande comment puis-je réaliser cette fonctionnalité?

J'ai essayé l'événement ci-dessous, mais sa ne fonctionne pas pour moi afterEditCell: function (rowid, celname, valeur, iRow, iCol) {// à faire ici }

l'événement ci-dessus n'obtient pas mis à la porte. mon tout colonne sont modifiables

Merci,

Answer 1

Cette question sera souvent posée. J'ai donc écrit un petit exemple de code qui montre comment implémenter un tel scénario avec des données locales seulement (pour jqGrid à partir de 3.7.x). Pour l'édition de données (édition en ligne), j'utilise ici l'événement double-clic. Les données modifiées seront sauvegardées après avoir appuyé sur la touche "Entrée". Pour le remplissage des éléments sélectionnés, j'utilise des identifiants. Si vous préférez utiliser des textes des catégories et des sous-catégories à la place, vous devez supprimer formatter: 'select' et apporter les modifications correspondantes dans la construction des éléments <option> (voir le code du gestionnaire d'événements dataEvents).

var categories = ["sport", "science"]; 
var subcategories = ["football", "formel 1", "physics", "mathematics"]; 
var mydata = [ 
    {Name:"Lukas Podolski",  Category:0, Subcategory:0}, 
    {Name:"Michael Schumacher", Category:0, Subcategory:1}, 
    {Name:"Albert Einstein", Category:1, Subcategory:2}, 
    {Name:"Blaise Pascal",  Category:1, Subcategory:3} 
]; 
var subcategoriesOfCategory = [ 
    ["football", "formel 1"], 
    ["physics", "mathematics"] 
]; 

var grid = jQuery("#list").jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    colModel: [ 
     { name: 'Name', width: 200 }, 
     { name: 'Category', width: 200, editable:true, formatter:'select', 
      edittype:'select', editoptions: { 
       value: categories, 
       dataInit : function (elem) { 
        var v = $(elem).val(); 
        grid.setColProp('Subcategory', { 
            editoptions:{value:subcategoriesOfCategory[v]}}); 
       }, 
       dataEvents: [ 
        { type: 'change', 
        data: { id: 7 }, 
        fn: function(e) { 
         var v=$(e.target).val(); 
         var sel = grid.getGridParam('selrow'); 
         grid.setColProp('Subcategory', { editoptions: 
               {value:subcategoriesOfCategory[v]}}); 
         var res = ''; 
         var sc = subcategoriesOfCategory[v]; 
         for (var i=0; i<sc.length; i++) { 
          res += '<option role="option" value="' + i + '">' + 
            sc[i] + '</option>'; 
         } 
         $("select#"+sel+"_Subcategory").html(res); 
        } 
        } 
       ] 
      } 
     }, 
     { name: 'Subcategory', width: 200, editable:true, formatter:'select', 
      edittype:'select', editoptions: {value: subcategories} } 
    ], 
    onSelectRow: function(id) { 
     if (id && id !== lastSel) { 
      grid.restoreRow(lastSel); 
      lastSel = id; 
     } 
    }, 
    ondblClickRow: function(id, ri, ci) { 
     if (id && id !== lastSel) { 
      grid.restoreRow(lastSel); 
      lastSel = id; 
     } 
     grid.editRow(id, true); 
     return; 
    }, 
    editurl: 'clientArray', 
    sortname: 'Name', 
    viewrecords: true, 
    rownumbers: true, 
    sortorder: "desc", 
    pager: '#pager', 
    caption: "Inline Editing example" 
}).navGrid('#pager', { edit: false, add: false, del: false, 
         search: false, view: false }); 

Cet exemple peut être modifié dans le cas de la construction d'une option de sélection à partir du serveur.