使用右键单击上下文菜单的JqGrid列选择器

Question

我想知道是否有可能创建一个右键单击上下文菜单，该菜单在jqGrid的标题行上激活，并且能够向右或左添加列或有问题的列或隐藏当前列（不使用ui-多选）。

非常感谢这方面的任何代码。

Answer 1

我建议你使用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演示如何使用它：