使用右鍵單擊上下文菜單的JqGrid列選擇器

我想知道是否可以創建一個右鍵單擊上下文菜單，該菜單在jqGrid的標題行上激活，並且能夠將列添加到右側或左側或正在討論的列或隱藏當前列（不使用ui-multiselect）。使用右鍵單擊上下文菜單的JqGrid列選擇器

在這方面的任何代碼將不勝感激。

2012-06-28 chugh97

我建議您使用contextmenu插件，您可以在jqGrid的plugins/jquery.contextmenu.js中找到它。例如在the answer和this one中描述了它如何在jqGrid正文中使用。用下面的代碼，你可以用它在列標題太：

var cm = $grid.jqGrid("getGridParam", "colModel"); 
$("th.ui-th-column").contextMenu('myMenu1', { 
    bindings: { 
     columns: function(trigger) { 
      var $th = $(trigger).closest("th"); 
      if ($th.length > 0) { 
       alert("the header of the column '" + cm[$th[0].cellIndex].name + 
        "' was clicked"); 
      } 
     } 
    }, 
    // next settings 
    menuStyle: { 
     backgroundColor: '#fcfdfd', 
     border: '1px solid #a6c9e2', 
     maxWidth: '600px', // to be sure 
     width: '100%' // to have good width of the menu 
    }, 
    itemHoverStyle: { 
     border: '1px solid #79b7e7', 
     color: '#1d5987', 
     backgroundColor: '#d0e5f5' 
    } 
});

其中菜單myMenu1被定義爲

<div class="contextMenu" id="myMenu1" style="display:none"> 
    <ul style="width: 200px"> 
     <li id="columns"> 
      <span class="ui-icon ui-icon-calculator" style="float:left"></span> 
      <span style="font-size:11px; font-family:Verdana">Choose columns</span> 
     </li> 
    </ul> 
</div>

The demo展示它如何被使用：

enter image description here

來源

2012-07-02 17:59:33 Oleg

冷杉非常感謝你的回答。我能夠在您的幫助下獲得上下文菜單。我還有一個相關的問題。我的上下文菜單看起來像添加列到左側 - 隱藏Col1，隱藏列2（子菜單） – chugh97

首先非常感謝您的答案。我能夠在您的幫助下獲得上下文菜單。我還有一個相關的問題。我的上下文菜單看起來像「向左添加列」 - 隱藏Col1，隱藏列2（子菜單）第二個菜單是「向右添加列」 - 隱藏Col1，隱藏Col2（子菜單）。當我右鍵單擊一列時，我希望能夠向列的左側或右側添加隱藏列或隱藏當前列。我可以使用代碼jqGrid在使用排列數組的rempaColumns中執行此操作，但如果我show hide幾次所有的東西都不同步，並且colModel不會刷新。 – chugh97

@ chugh97：您不能將一列添加到網格中。至少它非常複雜，不能用標準的jqGrid方法完成。如果一些隱藏的列已經存在，您可以更改列的順序並在當前列之前或之後創建現有的隱藏列，但我不明白原因。您可以按名稱而不是索引訪問隱藏列。在這種情況下，列的順序將不重要。 – Oleg

使用右鍵單擊上下文菜單的JqGrid列選擇器

回答

相關問題