2017-07-21 9 views
2

私はjqgrid(4.6.0)からfree-jqgrid(4.14.1)に変換しています。すべてが機能しているようですが、グリッドを右クリックするとコンテキストメニューが表示されません(ツールバーの検索ボタンはまだ機能しています)。追加の輸入品や必要なものはありますか?ここで私は現在、持ち込みんだよ:jqgridからfree-jqgridに変換しました。コンテキストメニューはありません

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

編集:

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

編集:それは理由があること、私には思える

<!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

を参照してください一つは、さまざまな方法でコンテキストメニューを作成することができます。 JavaScriptコードを少なくとも投稿する必要があります。あなたが問題を再現するデモ**を投稿しないと、あなたを助けるのは難しいです。たとえば、JSFiddleデモを使用すると、問題を再現するだけでなく、コードを修正して機能させることができます。私は 'plugins/jquery.contextmenu-ui'で' plugins/jquery.createcontexmenufromnavigatorbuttons.js'から 'createContexMenuFromNavigatorButtons'だけを個人的に使います。 – Oleg

+0

簡単な修正でこれが一般的な移行の問題であると私は(間違って)考えていました。申し訳ありません – user2340157

+0

デモ**を準備してください。問題を再現できますか?たとえば、 'multiselect:true'を使用しているかどうかを確認しますか?あなたが投稿したコードには、 'jqGridGetSelectedText'、' myBinding'、 'menuId'の定義とメニューdivを定義する対応するHTMLフラグメントは含まれていません。あなたはいくつかの副作用を持つ可能性があるいくつかのオプションの組み合わせを使うことができます。 'singleSelectClickMode:" selectonly "オプションを使用すると、問題が解決される可能性があります。それができるものを推測するだけでは解決できません。問題を再現できる必要があります。その後、すべてがクリアになります – Oleg

答えて

0

Context menu appearanceデモあなたの問題は、jqGrid(4.6.0)からfree jqGrid(4.14.1)への移行ではありませんしかし、jQuery UI 1.12.1への移行。 jQuery UI MenuのCSSスタイルは、バージョン1.10.x、1.11.x、および1.12.xでは何度も変更されています。プラグインjquery.contextmenu.jsjquery.contextmenu-ui.jsは古いです。彼らは10年前に出版されたコードに基づいています(2007年7月16日の日付はjquery.contextmenu.jsのコメントを参照)。実際にjQuery UI 1.12.1を使用する必要がない場合は、代わりにjQuery UI 1.11.4を使用することをお勧めします。これは、次のコンテキストメニューの外観を変更します。

enter image description here

あなたはjQueryのUI 1.12.1を使用する必要がない場合は、次のコードのに対しjquery.contextmenu-ui.jsで使用されるデフォルトの設定を変更する必要があります。

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

jquery.contextmenu-ui.jsを最新のバージョン(GitHub)に更新することが重要です。あなたがCDNからjquery.contextmenu-ui.js 4.14.1を使用する必要があるなら、あなたはさらに$.contextMenu.defaults方法

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

の上記の呼び出しに追加のCSSルールを追加する必要がhttp://jsfiddle.net/OlegKi/avxvy1z0/

+0

パーフェクト、ありがとう。 – user2340157

+0

@ user2340157:ようこそ! – Oleg

+0

@ user2340157:小さな追加の発言:私は、あなたが**投票**の回答や質問にあなたの権利を使用したことはないことがわかります。 stackoverflowの最も重要な目標は、他の開発者と*有用な情報を共有することです。情報が役に立つかどうかの主要な基準は*投票カウンタ*です。 1日に約30件の回答**を投票する権利があります([ここ](https://meta.stackexchange.com/a/5213/147495)を参照)。どの記事に投票することをお勧めします。あなたの読んだものと役に立つ情報は他の開発者に推薦されます。他の開発者を支援したい場合は、投票権を使用してください。 – Oleg

関連する問題