如何将标准文本框命令添加到 jqgrid 上下文菜单

Question

如果使用Custom values to Context Menu Items in JQgrid将上下文菜单添加到jqGrid并使用文本字段内联编辑，则文本框标准上下文菜单不可用，它被替换为jqGrid上下文菜单。

如何将标准文本框上下文菜单命令（撤消、剪切、复制、粘贴、删除、全选）添加到 jqGrid 上下文菜单或如何显示文本框内联编辑的标准上下文菜单？

更新

在内联编辑时，如果通过右键单击黄色背景或自动完成框打开标准菜单，并且在打开标准浏览器上下文菜单后，自定义菜单未关闭，则会出现两个菜单。

如何解决这个问题？

Answer 1

在“复制”、“粘贴”等上下文菜单命令中实现并不容易，因此我决定根据您的上一个问题从the answer 修改我的演示。在the new demo 中，上下文菜单仅在页面不包含选定文本时才会出现。

第一个问题是jquery.contextmenu.js的原始代码包含以下代码片段：

$(this).bind('contextmenu', function(e) {
  // Check if onContextMenu() defined
  var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
  if (bShowContext) display(index, this, e, options);
  return false;
});

所以contextmenu 处理程序总是返回false 并阻止创建标准上下文菜单。我将代码修复为以下（您可以下载完整的修改代码here）：

$(this).bind('contextmenu', function(e) {
  // Check if onContextMenu() defined
  var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
  currentTarget = e.target;
  if (bShowContext) {
    display(index, this, e, options);
    return false;
  }
});

createContexMenuFromNavigatorButtons函数的代码描述here我修改了

onContextMenu: function (e) {
    var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i,
        lastSelId;

    if (rowId && getSelectedText() === '') {
        ...
        return true;
    } else {
        return false; // no contex menu
    }
}

使用getSelectedText() 并仅在未选择文本时创建上下文菜单。因此，只有在未选择文本时，您才会看到自定义上下文菜单，如果存在文本选择，则会看到标准上下文菜单（取决于 Web 浏览器）：

更新：根据答案，我用additional information 修改了关于jquery.contextmenu.js 的错误报告。我希望 jquery.contextmenu.js 的主代码尽快更改，包含在 plugins 子目录中。

更新 2：如何查看 here 所有修复都已在 github 上的 jqGrid 主代码中，并包含在 jqGrid 4.3 中。

更新 3：如果您希望为所有 启用 <input type="text" ...>、<input type="textarea" ...> 和 <textarea ...> 元素提供标准上下文菜单，您只需稍作修改onContextMenu 回调中的代码。例如

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 && getSelectedText() === '') {
        ...

再查看一个demo，其中将通过双击激活内联编辑。