Question

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

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

＆＃13;

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");
	}
});
}

＆＃13;

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

＆＃13;

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);
    };
};

＆＃13;

但这不适用于jqGrid模态。

它似乎适用于Select2 full biuld和AttachContainer但是我注意到了oveflow的问题：隐藏： - （

Answer 1

我已经在the issue上发布了答案，但由于更多人阅读了steckoverflow，我在此重复主要信息。

jqGrid默认使用jqModal.js模块进行表单编辑。 jqModal.js元素上的模态keypress keydown mousedown注册document事件处理程序（请参阅here），它可以阻止按下的键并将焦点设置在第一个可见的输入元素上编辑表格（见the line）。人们可以通过两种方式解决问题。

最简单的方法

$.fn.jqm = false;

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

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

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

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

在jqGrid编辑模态窗口问题中选择2 v4

1 个答案: