2017-07-21 213 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' 
    } 
}); 

編輯: Context menu appearance演示

<!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.createcontexmenufromnavigatorbuttons.js'中的'createContexMenuFromNavigatorButtons'和'plugins/jquery.contextmenu-ui'。 – Oleg

+0

我(錯誤地)認爲這將是一個簡單的修復常見的遷移問題。對不起 – user2340157

+0

你可以準備**演示**,它重現了這個問題?例如,您是否使用'multiselect:true'或不?您發佈的代碼不包含「jqGridGetSelectedText」,「myBinding」和「menuId」的定義以及定義菜單div的相應HTML片段。等等......你可以使用一些選項的組合,這可能會有一些副作用。這可能是因爲使用'singleSelectClickMode:'選擇「選項解決了這個問題。人們無法解決猜測它會是什麼。一個需要能夠重現該問題。之後,一切都將清晰可見 – Oleg

回答

0

在我看來,其原因你的問題不是從jqGrid(4.6.0)遷移到免費的jqGrid(4.14.1) ,但遷移到jQuery UI 1.12.1。 jQuery UI菜單的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那麼你需要添加額外的CSS規則附加到$.contextMenu.defaults方法的調用以上

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

看到http://jsfiddle.net/OlegKi/avxvy1z0/

+0

完美,謝謝。 – user2340157

+0

@ user2340157:不客氣! – Oleg

+0

@ user2340157:小額外的評論:我發現你從來沒有使用過**投票權**的答案或問題。 stackoverflow最重要的目標是與其他開發人員共享*有用的信息。信息是否有用的主要標準是*投票計數器*。您有權每天投票約30個答案**(請參閱[此處](https://meta.stackexchange.com/a/5213/147495))。建議您爲任何文章投票,您的閱讀和哪些信息對您有幫助(推薦給其他開發人員)。如果你想幫助其他開發者,請使用投票權。 – Oleg