jqGrid navButtonAjouter ne fonctionne pas

Question

J'ai un jqGrid dans mon projet et je voudrais ajouter des boutons personnalisés, mais aucun bouton n'apparaît dans la grille et autant que je vois il n'y a pas de problème de syntaxe. J'ai essayé de simplifier ma grille, mais le bouton n'apparaissait toujours pas. J'utilise le moteur de template Velocity, c'est pourquoi j'ai le symbole $ dans mon code, qui ne fait pas référence à jQuery. J'utilise jqGrid 3.8.2.

Voici comment je construis la grille:

 <script type="text/javascript"> 

       function loadCompleteHandler(){ 
        jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height')))); 
       } 

       function select1() { 
        return ": ;false:no;true:yes"; 
       } 

       function select2(){ 
          return ": ; 1:Select1;2:Select2;3:Select3"; 
       } 

     var colModelData = [ 
        {name:'1', index:'1',width:'5%', hidden: true, align:'center', sortable: false, resizable:false}, 
        {name:'2', index:'2',width:'10%', align:'center', formatter: 'checkbox', sortable: false, editable: true, stype: 'select', edittype: 'checkbox', editoptions: {value: "Yes:No"}, searchoptions: { value: select1()}, resizable:false}, 
        {name:'3', index:'3', width:'35%', sortable: false, resizable:false, defaultValue: ''}, 
        {name:'4', index:'4', width:'30%', sortable: false, resizable:false, defaultValue: ''}, 
        {name:'5', index:'5', width:'20%', sortable: false, defaultValue: '$selectedValue', stype: 'select', searchoptions: {value: select2()}, resizable:false}, 
        ] 

     jQuery(function(){ 
      jQuery("#listTable").jqGrid({ 
      url: '$urlManager.getURL("/myPath/My.json")' + '?param1=param1Value&param2=param2Value', 
      datatype: 'json', 
      postData: { 
       filters: '{"groupOp":"AND","rules":' + 
         '[{"field":"field3","op":"eq","data":"$selectedValue"}]}' 
      }, 
      mtype: 'POST', 
      colNames:['', '<input type="checkbox" id="selectionCheckbox" onclick="checkboxClick(this)">', 'column3', 'column4', 'column5'], 
      colModel : colModelData, 
      width:'768', 
      height: 500, 
      pager: '#pagerDiv', 
      gridview: true, 
      rowNum: 50, 
      rowTotal: 500, 
      sortorder: 'desc', 
      onSelectRow: function(id){ 
        if (id){ 
         if (id !== lastSel) { 
          jQuery('#listTable').restoreRow(lastSel); 
          jQuery('#listTable').editRow(id, true); 
          lastSel=id; 
         } else { 
          jQuery('#listTable').editRow(id, true); 
         } 
        } 
       },   
      editurl: '$urlManager.getURL("myPath/MyScreen.vm")', 
      caption: 'Caption', 
      hidegrid: false, 
      viewrecords: true, 
      loadComplete: loadCompleteHandler, 
      ignoreCase: true, 
      search: true, 
      page: $page 
     }); 

      jQuery(function(){ 
       jQuery("#listTable").jqGrid('filterToolbar',{ 
            stringResult: true, 
            searchOnEnter: false }); 
      }); 


      jQuery("#listTable").jqGrid('navGrid',"#pagerDiv",{edit:false,add:false,del:false}) 
           .jqGrid('navButtonAdd', '#pagerDiv', {caption: "Edit", 
            onClickButton:function(){ 
             console.log('Button clicked'); 
            }}); 
    <script type="text/javascript"> 

    <table id = "listTable"> </table> 
    <div id = "pagerDiv"></div> 

Merci à l'avance.

Answer 1

Votre code a quelques problèmes. L'erreur principale est que vous manquez }); à la fin de votre code JavaScript. Un autre problème que vous utilisez jQuery(function(){... à l'intérieur de jQuery(function(){... qui rendent le code lisible. Je vous suggère en outre de réduire le nombre de global fonctions. Dans votre code actuel, les fonctions loadCompleteHandler, select1 et select2 sont définies au niveau supérieur et sont globales. Vous devriez mieux placer le code à l'intérieur de n'importe quelle fonction (comme à l'intérieur de jQuery(function(){...});). Il vaut mieux définir les fonctions en ligne. Remarque suivante: vous devez toujours utiliser le paramètre radix (10 dans votre cas) dans la fonction parseInt et ne pas inclure les virgules de fin (voir },] au et de la définition de colModelData). Une variable supplémentaire: lastSel devrait être définie. Les $page ne sont pas claires pour moi. Dans ma modification de votre code que vous trouverez here je viens de le remplacer à 1. De toute façon, vous pouvez voir dans la démo que la méthode navButtonAdd fonctionne très bien dans le code modifié.

Je vous recommande d'utiliser JSLint qui peut vous aider à améliorer la qualité de votre code.