boutons de la barre de navigation dupliqués sur jqGrid

Question

J'ai un problème pour actualiser ma grille, car j'ajoute des boutons supplémentaires après avoir chargé ma grille, mais lorsque j'essaie de recharger un autre bouton est ajouté.

$j(document).ready(function(){ 
    $j("#search").button().click(function() { 
     var loadingImg = "../img/bpm_scripts/common/images/images"; 
     var ejecutive=$j("#ejecutiveId").val(); 
     buildTable(ejecutive); 
    }); 
}); 

et

function buildTable(ejecutive){ 
    $j("#list").jqGrid('setGridParam', 
         {postData:{ ejecutive:ejecutive}, search:true }); 
    $j("#list2").trigger("reloadGrid"); 
    $j("#list2").jqGrid({ 
     url: "<f:invokeUrl methodName='getInstances' var='sales'/>", 
     datatype: "xml", 
     colNames:['Inv No','No','Creado','Actualizado','Estatus','Hotel'], 
     colModel:[ 
      {name:'invoiceId',index:'invoiceId', width:40}, 
      {name:'invoiceContracCustom',index:'invoiceContracCustom', width:50}, 
      {name:'invoiceCreatedBy',index:'invoiceCreatedBy', width:100}, 
      {name:'invoiceUpdatedBy',index:'invoiceUpdatedBy', width:100}, 
      {name:'invoiceStatus',index:'invoiceStatus', width:75,align:'center'}, 
      {name:'invoiceHotels',index:'invoiceHotels', width:75,align:'center'} 
     ], 
     rowNum:10, 
     autowidth: true, 
     rowList:[10,20,30], 
     pager: jQuery('#pager2'), 
     sortname: 'invoiceId', 
     viewrecords: true, 
     sortorder: "desc", 
     xmlReader: { 
      root: "results",  
      row: "invoice", 
      repeatitems: false, 
      page: "page>currentpage", 
      total: "page>pages", 
      records:"page>records", 
      id: "invoiceId" 
     }, 
     caption:"XML Example" }).navGrid('#pager2', 
      {edit:false,add:false,del:true}, 
      {height:280,reloadAfterSubmit:false}, // edit options 
      {height:280,reloadAfterSubmit:false}, // add options 
      {reloadAfterSubmit:false}, // del options 
      {}); // search options 
    }); 

et ceci est invoqué:

$j("#list2").jqGrid('navButtonAdd','#pager2', { 
    caption:"", 
    buttonicon:"ui-icon-check", 
    position:"last", 
    onClickButton:function(){ 
     var gsr = jQuery("#list2").jqGrid('getGridParam','selrow'); 
     if(gsr){ 
      $j.ajax({ 
       url: "url", 
       type: 'GET', 
       async: true, 
       success: function() { alert('fine'); }, 
       error:function() { alert('Se ha producido un error'); } }); 
     } 
     else 
      alert("Please select Row") ; 
    } 
}); 

} Je ne sais pas où devrait être cette partie, parce que si je le mets avant alors aucun bouton est chargé.

Cordialement.

[1]: http://a.imageshack.us/img46/7697/repeatf.jpg l'image

Answer 1

Il me semble que vous devriez juste réorganiser certaines fonctions

$j(document).ready(function(){ 
    // create jqGrid with additional button 
    $j("#list2").jqGrid({ 
     url: "<f:invokeUrl methodName='getInstances' var='sales'/>", 
     datatype: "xml", 
     // .... other jqGrid parameters 
    }).jqGrid('navButtonAdd','#pager2', { 
     // all navButtonAdd parameters 
    }); 

    $j("#search").button().click(function() { 
     var loadingImg = "../img/bpm_scripts/common/images/images"; 
     $j("#list").jqGrid('setGridParam', 
        {postData:{ ejecutive: $j("#ejecutiveId").val()}, search:true }); 
     $j("#list2").trigger("reloadGrid"); 
    }); 
}); 

De plus, vous pouvez utiliser postData en fonction directement dans la définition de $j("#list2").jqGrid (voir How to filter the jqGrid data NOT using the built in search/filter box) . Ensuite, vous pouvez modifier le code à la

$j(document).ready(function(){ 
    // create jqGrid with additional button 
    $j("#list2").jqGrid({ 
     url: "<f:invokeUrl methodName='getInstances' var='sales'/>", 
     postData: { 
      ejecutive: function() { return $j("#ejecutiveId").val(); }, 
      search:true 
     }, 
     datatype: "xml", 
     // .... other jqGrid parameters 
    }).jqGrid('navButtonAdd','#pager2', { 
     // all navButtonAdd parameters 
    }); 

    $j("#search").button().click(function() { 
     var loadingImg = "../img/bpm_scripts/common/images/images"; 
     $j("#list2").trigger("reloadGrid"); 
    }); 
}); 

suivant Vous pouvez inclure plus de logique dans la fonction qui calcule le paramètre ejecutive si nécessaire. Il est important de comprendre que, à chaque rafraîchissement de jqGrid, la fonction sera appelée immédiatement avant l'appel ajax. Vous aurez donc toujours la valeur réelle de "#ejecutiveId" utilisée.

Answer 2

Merci pour votre aide. J'ai suivi vos conseils et ajouté la ligne suivante et ont disparu la duplication des boutons.

$j("#list").jqGrid('GridUnload'); 

Answer 3

1. $("#grid").jqGrid('GridUnload');
2. $("#grid").jqGrid({ url: "");
3. jQuery("#grid").jqGrid('setGridParam', { postData: { id: function() { return balanzaConfig.formDataParam.id; }, strDate: function() { return balanzaConfig.formDataParam.strDate; } } }).trigger('reloadGrid');

Answer 4

Bien que ce soit une question très ancienne, partage encore ma réponse juste au cas où quelqu'un d'autre rencontre le même problème.

J'ai trouvé que l'ajout d'un appel explicite à la fonction 'GridUnload' n'est pas nécessaire.

Si vous définissez « id » au bouton, il ne répétera pas le bouton sur la barre de navigation, voici un exemple:

$j("#list2").jqGrid('navButtonAdd','#pager2', { 
    id: "btnId", 
    . 
    . 
    . 
    . rest of the code 
});