2017-07-21 4 views
2

Je convertis jqgrid (4.6.0) en free-jqgrid (4.14.1). Tout semble fonctionner, mais je n'obtiens pas mon menu contextuel lorsque je clique avec le bouton droit sur la grille (le bouton de recherche de la barre d'outils fonctionne toujours). Y at-il une importation supplémentaire ou quelque chose dont j'ai besoin? Voici ce que je suis en train de mettre en:Conversion de jqgrid en free-jqgrid, maintenant pas de menu contextuel

jqueryui/1.12.1/themes/smoothness/jquery-ui.css 
free-jqgrid/4.14.1/css/ui.jqgrid.css 
free-jqgrid/4.14.1/plugins/css/ui.multiselect.css 
jquery/3.2.1/jquery.min.js 
jqueryui/1.12.1/jquery-ui.min.js 
free-jqgrid/4.14.1/plugins/min/ui.multiselect.js 
free-jqgrid/4.14.1/i18n/grid.locale-en.js 
free-jqgrid/4.14.1/jquery.jqgrid.min.js 
free-jqgrid/4.14.1/plugins/jquery.contextmenu.js 

TIA

Edit:

grid.contextMenu(menuId, { 
    bindings : myBinding, 
    onContextMenu : function(e) { 
     var p = grid[0].p, 
      i, 
      lastSelId, 
      $target = $(e.target), 
      rowId = $target.closest("tr.jqgrow").attr("id"), 
      isInput = $target.is(':text:enabled') || $target.is('input[type=textarea]:enabled') || $target.is('textarea:enabled'); 
     if (rowId && !isInput && jqGridGetSelectedText() === '') { 
      i = $.inArray(rowId, p.selarrrow); 
      if (p.selrow !== rowId && i < 0) { 
       // prevent the row from be unselected 
       // the implementation is for "multiselect:false" which we use, 
       // but one can easy modify the code for "multiselect:true" 
       grid.jqGrid('setSelection', rowId); 
      } else if (p.multiselect) { 
       // Edit will edit FIRST selected row. 
       // rowId is allready selected, but can be not the last selected. 
       // Se we swap rowId with the first element of the array p.selarrrow 
       lastSelId = p.selarrrow[p.selarrrow.length - 1]; 
       if (i !== p.selarrrow.length - 1) { 
        p.selarrrow[p.selarrrow.length - 1] = rowId; 
        p.selarrrow[i] = lastSelId; 
        p.selrow = rowId; 
       } 
      } 
      return true; 
     } else { 
      return false; 
      // no contex menu 
     } 
    }, 
    menuStyle : { 
     backgroundColor : '#fcfdfd', 
     border : '1px solid #a6c9e2', 
     maxWidth : '600px', 
     width : '100%' 
    }, 
    itemHoverStyle : { 
     border : '1px solid #79b7e7', 
     color : '#1d5987', 
     backgroundColor : '#d0e5f5' 
    } 
}); 

Edit: Context menu appearance Demo

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" /> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" type="text/css" media="screen" /> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/css/ui.multiselect.min.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/min/ui.multiselect.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/i18n/grid.locale-en.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.createcontexmenufromnavigatorbuttons.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/jquery.contextmenu-ui.js"></script> 

     <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen"> 
     <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
     <title>jqGrid Loading Data - Million Rows from a REST service</title> 
    </head> 
    <body> 
     <table id="jqGrid"></table> 
     <div id="jqGridPager"></div> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#jqGrid").jqGrid({ 
        url : 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders', 
        mtype : "GET", 
        datatype : "jsonp", 
        colModel : [{ 
         label : 'OrderID', 
         name : 'OrderID', 
         key : true, 
         width : 75 
        }, { 
         label : 'Customer ID', 
         name : 'CustomerID', 
         width : 150 
        }, { 
         label : 'Order Date', 
         name : 'OrderDate', 
         width : 150 
        }, { 
         label : 'Freight', 
         name : 'Freight', 
         width : 150 
        }, { 
         label : 'Ship Name', 
         name : 'ShipName', 
         width : 150 
        }], 
        viewrecords : true, 
        width : 780, 
        height : 250, 
        rowNum : 20, 
        pager : "#jqGridPager" 
       }).jqGrid('navGrid', "#jqGridPager", { 
        add : true, 
        edit : true, 
        view : true, 
        del : true, 
        search : true, 
        refresh : true 
       }).jqGrid("createContexMenuFromNavigatorButtons", $("#jqGrid").jqGrid("getGridParam", "pager")) 
      }); 
     </script> 

    </body> 
</html> 
+0

On peut créer le menu contextuel de différentes manières. Vous devez au moins publier le code JavaScript que vous utilisez. Il est difficile de vous aider si vous ne postez pas ** la démo **, ce qui reproduit le problème. Ayant JSFiddle démo, par exemple on pourrait non seulement reproduire le problème, mais réparer le code pour le faire fonctionner. Personnellement, je n'utilise que 'createContexMenuFromNavigatorButtons' depuis' plugins/jquery.createcontexmenufromnavigatorbuttons.js' avec 'plugins/jquery.contextmenu-ui'. – Oleg

+0

J'ai (incorrectement) supposé que ce serait un problème de migration commun avec une solution facile. Désolé – user2340157

+0

Pourriez-vous préparer ** la démo **, qui reproduit le problème? Utilisez-vous 'multiselect: true' ou pas, par exemple? Le code que vous avez posté ne contient pas la définition de 'jqGridGetSelectedText',' myBinding' et 'menuId' et le fragment HTML correspondant, qui définit le div du menu. Et ainsi de suite ... Vous pourriez utiliser une combinaison d'options, ce qui pourrait avoir des effets secondaires. Il se peut que l'utilisation de l'option 'singleSelectClickMode:" selectonly "' résout le problème. On ne peut pas se résoudre à deviner ce que cela pourrait être. Il faut être capable de reproduire le problème. Après que tout sera clair – Oleg

Répondre

0

Il me semble que la raison de vos problèmes ne sont pas la migration de jqGrid (4.6.0) à jqGrid libre (4.14.1) , mais migration vers l'interface utilisateur jQuery 1.12.1. Le style CSS de jQuery UI Menu est modifié plusieurs fois dans les versions 1.10.x, 1.11.x et 1.12.x. Les plugins jquery.contextmenu.js et jquery.contextmenu-ui.js sont anciens. Ils sont basés sur le code publié il y a 10 ans (voir la date du 16 juillet 2007 dans les commentaires du fichier jquery.contextmenu.js). Si vous n'avez pas vraiment besoin d'utiliser jQuery UI 1.12.1, alors je vous avais suggéré d'utiliser jQuery UI 1.11.4 à la place. Il change l'apparence du menu contextuel pour ce qui suit:

enter image description here

Si vous ne souhaitez utiliser jQuery UI 1.12.1 alors vous devez modifier les paramètres par défaut utilisés par jquery.contextmenu-ui.js par rapport du code ci-dessous:

$.contextMenu.defaults({ 
    menuShadowStyle: { 
     "box-shadow": "8px 8px 8px #aaaaaa", 
     margin: "-2px", 
     padding: "0" 
    }, 
    itemIconSpanStyle: { 
     "float": "none", 
     top: "-2px", 
     position: "relative" 
    } 
}); 

Il est important de mettre à jour jquery.contextmenu-ui.js vers la dernière version de GitHub. Si vous devez utiliser le jquery.contextmenu-ui.js 4.14.1 de CDN, alors vous devez ajouter des règles CSS supplémentaires en plus à l'appel ci-dessus $.contextMenu.defaults méthode

.jqContextMenu .ui-menu .ui-icon { 
    position: relative; 
} 
.jqContextMenu li span { 
    float: none !important; 
} 

voir http://jsfiddle.net/OlegKi/avxvy1z0/

+0

Parfait, merci. – user2340157

+0

@ user2340157: Vous êtes les bienvenus! – Oleg

+0

@ user2340157: Petite remarque supplémentaire: Je vois que vous n'avez jamais utilisé votre droit de ** voter ** des réponses ou des questions. L'objectif le plus important de stackoverflow est de partager des informations * utiles * avec d'autres développeurs. Le critère principal si l'information est utile est le * compteur de vote *. Vous avez le droit de voter environ 30 réponses ** par jour ** (voir [ici] (https://meta.stackexchange.com/a/5213/147495)). Il est recommandé de voter n'importe quel article, que vous lisez et quelles informations trouver utile (recommandé aux autres développeurs). Veuillez utiliser le droit de vote si vous voulez aider d'autres développeurs. – Oleg