jqGridのヘッダー行でアクティブ化され、右または左に列を追加したり、問題の列を追加したり、現在の列を非表示にしたりできる右クリックコンテキストメニューを作成できるかどうかを知りたいと思いました(ui-multiselectを使用しません)。
この点でのコードは大歓迎です。
jqGridのヘッダー行でアクティブ化され、右または左に列を追加したり、問題の列を追加したり、現在の列を非表示にしたりできる右クリックコンテキストメニューを作成できるかどうかを知りたいと思いました(ui-multiselectを使用しません)。
この点でのコードは大歓迎です。
jqGridcontextmenu
にあるプラグインを使用することをお勧めします。たとえば、答えとplugins/jquery.contextmenu.js
これには、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>
デモは、それがどのように使用されるかを示しています: