jqGrid 编辑模式中的 Select2 v4 window 问题

Question

我知道 jQueryUI 模式 window 和 Select2 有问题。我正在使用此修复程序 https://github.com/select2/select2/issues/1246#issuecomment-71710835。但目前我正在尝试将 Select2 与 jqGrid 及其编辑模式 window 集成，我注意到输入字段失去了对 keydown 的关注并且没有输入任何文本。我正在使用最新版本的 Select2 v4.0.0。

点击 select2 - 列表打开且输入有焦点
开始搜索文本（按下键）- 输入失去焦点并且没有文本出现
奇怪，但在同一个模态上window，当 Select2 是多种类型时，它工作正常
Select2 是在 jqGrid dataInit 事件上创建的：

dataInit: function (elem) {
$(elem).css({ width: "500px" }).select2({
 data: StacjeDlaIdZamPoc,
 allowClear: false,
 tags: false,
 minimumInputLength: 0,
 placeholder: "Wskaż stację",
 templateResult: function (repo) {
  if (repo.loading) {
   return repo.text;
  }
  return $(repo.text2);
 },
 templateSelection: function (repo) {
  return $(repo.text2);
 },
 minimumResultsForSearch: 5
}).on("select2:select", function(event) {
 var LWystapien = parseInt(event.params.data.LWystapien);
 $("#Wystapienie").val(1);
 $("#LWystapien").val(LWystapien);
 if (LWystapien > 1) {
  $("#Wystapienie").prop("disabled", false).spinner("enable");
 } else {
  $("#Wystapienie").prop("disabled", true).spinner("disable");
 }
});
}

正如我上面所写，我已经尝试修复 jQueryUI 模式：

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
    var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function(e) {
     console.log(e);
        if ($( e.target ).closest('.select2-dropdown').length) { return true; }
        return ui_dialog_interaction.apply(this, arguments);
    };
};

但这不适用于 jqGrid 模态。

它似乎可以与 Select2 full biuld 和 AttachContainer 一起使用，但我注意到 oveflow: hidden 的问题:-(

Answer 1

我已经在 the issue 上发布了答案，但是因为更多人阅读 steckoverflow，所以我在这里重复主要信息。

jqGrid 默认使用 jqModal.js 模块进行表单编辑。模式 jqModal.js 在 document 元素上注册 keypress keydown mousedown 事件处理程序（参见 here) which can block the pressed key and to set the focus on the first visible input element of the edit form (see the line）。一个可以解决问题的方法有两种。最简单的方法是

$.fn.jqm = false;

阻止使用 jqModal.js 模块。如果包含 jQuery UI js 文件，那么 jqGrid 将在这种情况下使用 jQuery UI 模态。这是解决问题最简单的方法。

或者，可以将 class jqmID1（或 jqmID 附加另一个索引）添加到 select2 的容器中。可以在 the comment 中找到相应的代码示例。该演示至少在 Google Chrome 中有效。它主要演示了表单编辑中 select2 奇怪行为的原因。推荐的方法是只使用 jQuery UI 模态或者不使用 modal: true 选项。

更新： 我考虑了这个问题并找到了更好的解决方案。我提醒我，有人在 jqModal.js 中处理鼠标事件时遇到了一些问题，我在很多年前发布了修复程序，它已经包含在旧版本的 jqGrid 中。修复包括测试鼠标光标的绝对位置，如果它在模式对话框区域内，则允许鼠标事件。

所以我有了修改 jqModal.js 的想法，以便也对键盘事件进行关闭测试。我将相应的更改发布到免费的 jqGrid（请参阅 here) and now select2 have no problems. See http://jsfiddle.net/191no21j/13/。

jqGrid 编辑模式中的 Select2 v4 window 问题

Select2 v4 in jqGrid edit modal window issue

twitter-bootstrap

jqgrid

jquery-select2-4