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

【问题标题】：JqGrid Column Selector using a right click context menu使用右键单击上下文菜单的 JqGrid 列选择器
【发布时间】：2012-06-28 09:07:09
【问题描述】：

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

任何这方面的代码都将不胜感激。

【问题讨论】：

标签： jqgrid

【解决方案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 演示如何使用它：

【讨论】：

首先非常感谢您的回答。在您的帮助下，我能够获得上下文菜单。我有另一个相关的问题。我的上下文菜单看起来像向左添加列 - 隐藏 Col1，隐藏列 2（子菜单）
首先非常感谢您的回答。在您的帮助下，我能够获得上下文菜单。我有另一个相关的问题。我的上下文菜单看起来像“向左添加列”-隐藏 Col1、隐藏列 2（子菜单）第二个菜单是“向右添加列”-隐藏 Col1、隐藏 Col2（子菜单）。当我右键单击一列时，我希望能够在列的左侧或右侧添加一个隐藏列或隐藏当前列。我可以使用 jqGrid 在 rempaColumns 中使用排列数组的代码来做到这一点，但如果我show hide 几次所有的东西都不同步并且 colModel 不刷新。
@chugh97：您不能在网格中添加列。至少它非常复杂，不能用标准的 jqGrid 方法来完成。如果某些隐藏列已经存在，您可以更改列的顺序并将现有的隐藏列设置在当前列之前或之后，但我不明白这是为什么。您可以按名称而不是索引访问隐藏列。如果列的顺序不重要。
@chugh97：如果你需要一个使用remapColumns 的工作示例，你可以找到它here 例如。
@chugh97：抱歉，我两周以来一直在出差（在一位客户那里），并且至少停留了大约 4 周。所以我现在不能花很多时间来帮助其他 jqGrid 用户。