2

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

  1. 单击 select2 - 打开列表并且输入具有焦点
  2. 开始搜索文本（keydown） - 输入失去焦点并且没有文本出现
  3. 奇怪，但是在同一个模态窗口上，当 Select2 是多种类型时，它工作正常
  4. 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 存在问题:-(

4

1 回答 1

1

我已经发布了关于这个问题的答案，但是因为更多的人阅读了 steckoverflow，所以我在这里重复主要信息。

jqGridjqModal.js默认使用模块进行表单编辑。模态在元素上jqModal.js注册keypress keydown mousedown事件处理程序document（参见此处），它可以阻止按下的键并将焦点设置在编辑表单的第一个可见输入元素上（参见行）。一种可以解决问题的方法有两种。最简单的方法是

$.fn.jqm = false;

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

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

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

所以我有了修改的想法，jqModal.js以便对键盘事件进行密切测试。我发布了对免费 jqGrid 的相应更改（请参见此处），现在 select2 没有问题。请参阅http://jsfiddle.net/191no21j/13/。

于 2015-05-14T23:31:22.783 回答