Jquery UI Dialog + Jqgrid 同时进行答案

【问题标题】：Jquery UI Dialog + Jqgrid in the same timeJquery UI Dialog + Jqgrid 同时进行
【发布时间】：2011-06-22 10:47:35
【问题描述】：

问题描述：我有一个带有 Jqgrid 和导航栏的列表

观点：真，编辑：真，添加：真，搜索：假，删除：真

当我选择一行并单击编辑时，会弹出一个对话框，其中包含可编辑的字段。

对于一个字段，我注册了一个事件处理程序：

$("#gps_coords").live("click",function(){
        $("#google_map").dialog("open");
    });

当我点击编辑对话框中的 gps_coords 字段时，打开 google_map 对话框，

 $("#google_map").dialog(
{
    width:800,
    height:500,
    autoOpen: false,
    modal:true, 
    ....
 }

但是焦点或任何在（现在是背景编辑对话框）上，所以光标闪烁以那种形式而不是新打开的形式。

我已经尝试过（在对话框设置中）：

  open: function(event, ui) {
        $("#google_map").focus(); 
    }

注意：我在新打开的对话框中有一个文本字段，但无法点击或更改它的值。

那么可以做些什么，将焦点放在新打开的对话框上？

谢谢

【问题讨论】：

标签： jquery jquery-ui jqgrid

【解决方案1】：

我不确定我的理解是否正确。

但我的理解是，您可以将$("#gps_coords").live("click",... 绑定到编辑控件替换为colModel 中gps_coords 列定义的附加editoptions 选项：

editoptions: {
    dataEvents: [ 
        {
            type: 'click',
            fn: function() {
                $("#google_map").dialog("open");
            }
        }
    ] 
}

要设置焦点，您可能应该使用$("#google_map").focus() 之类的调用，但您必须将它放在单独的线程中：

setTimeout(function(){
    $("#google_map").focus();
}, 50);

【讨论】：

替换 $("#gps_coords").live("click",... ，它工作，谢谢，但主要问题仍然存在：我无法点击文本框对话框（“#google_map”），光标一直在第一个文本字段的 jqgrid 对话框上闪烁！
@Kszili：如果您想将焦点放在某个特定的文本字段上，您应该将其用作$(selector).focus() 中的选择器。例如字段有 id="mytextfield" 你可以使用$('#mytextfield').focus() 而不是$("#google_map").focus()。如果该字段没有 id，您应该以其他方式识别它，例如 $("#google_map input:first").focus()。
@Oleg：我做到了，但我不能点击那个文本框，正如我所提到的，当我尝试这样做时，jqgrid 对话框的第一个文本框元素将使光标在其中闪烁。
@Kszili：我读过这个，但我不明白你的意思。 jqGrid 对话框的一个众所周知的问题是“z-Index”。大概是你的问题？您可以使用zIndex 编辑选项（例如zIndex:1010）在jqGrid 中增加它。如果您还有其他问题，最好发布 URL 或可用于重现您的问题的代码。
@Oleg: 我会在明天给你发一个关于这个问题的链接，谢谢

【解决方案2】：

我已经纠正了这个问题，在我的例子中是这样的：

每个对话框都是模态的，当它弹出第一个对话框，然后什么也做不了时，我从其中删除了模态选项，现在只有第二个有模态：true。而且它工作得很好。

对话 1：

$("#dialog1").dialog(
    {
        width:800,
        height:500,
        autoOpen: false,
        //modal:true
        ...
});

对话 2：

$("#dialog2").dialog(
        {
            width:800,
            height:500,
            autoOpen: false,
            modal:true,
            ...
    });

【讨论】：

【解决方案3】：

试试这个

$.widget( "ui.dialog", $.ui.dialog, {
    _allowInteraction: function( event ) {
        return !!$( event.target ).closest( ".ui-jqdialog" ).length || this._super( event );
    }
});

【讨论】：