如何在 iggridupdating 编辑器焦点上打开 jquery 对话框

Question

我正在使用 Ignite UI 网格。 当特定编辑器专注于新行插入或更新时，我必须打开一个对话框。 编辑模式为“行”。

我能够打开对话框，我正在为此使用 editCellStarted 事件并将编辑器绑定到焦点事件。代码如下：

             $("#Grid").igGrid({
                       primaryKey: "keyCode",                           
                       autoCommit: true,
                       columns: _getColumnsResult,                           
                       features: [
                        {
                            name: 'Updating',                               
                            columnSettings: updateColSettings,                                
                            editMode: 'row',                                
                            editCellStarted: function (evt, ui) {
                              if(ui.columnKey=="Demo")
                             { 
                               $("#" + ui.columnkey + " input").bind('focus', { id: ui.columnIndex}, function (e) {                                          
                                $("dialog1").dialog();                                            
                               });                                  
                             }                                                                   
                            },          
                        }, //Updating feature ended                  
                        {
                            name: "Sorting",
                            type: "local",
                        },
                        {
                            name: "Selection",
                            mode: "row",
                            rowSelectionChanged: function (evt, ui) { Selectedrow = ui.row.index }
                        }]
                    });

问题： 单击添加新时，如果该特定列是第一列，则焦点转到对话框并返回到编辑器。焦点不会保留在对话框中。

但如果该列不是第一列，则代码可以正常工作。

请帮助完成此操作。 提前致谢。

这是fiddle。

Answer 1

我不能在这里测试，如果你能提供一个 jsFiddle 作为例子会很好，但可能是其他东西绑定到那个将焦点返回到行的事件，你可以尝试更改代码要添加的 if 子句：

$("#" + ui.columnkey + " input").bind('focus', { id: ui.columnIndex}, function (e) {                                          
    e.stopPropagation();
    $("dialog1").dialog();
});  

停止触发任何其他处理程序的焦点事件。

否则，您将不得不找出导致焦点返回该行的原因。

编辑

好的，所以看起来焦点实际上首先到达那里（在对话框事件触发之前），不确定为什么对话框不保持焦点 - 也许它是异步的并且那里存在时间问题，但您可以修复它只是通过强制焦点到对话框。我在您的输入中添加了一个 ID，然后在事件处理程序中使用了它：

$("#" + ui.columnKey + " input").bind('focus', function (e) {
    $("#dialog").dialog();
    $("#dia_inputbox").focus();
});

工作小提琴here

另外，我原以为您不需要绑定到focus，而是直接在editCellStarted 的处理程序中弹出对话框——这可行，但您不能将焦点移回，如果您停止单元格无法正确编辑的传播。我也试过editCellStarting。上面的解决方案有效，但感觉有点像黑客，应该有一种更干净的方法，但我不确定它是什么。

Answer 2

作为替代方案，由于您提供了编辑器选项，如果仅在一个字段上需要此对话框，是否可以处理一些 editor events？像这样：

//...
 {
    columnKey: "Name",
    editorOptions: {
        id: "Name",
        type: 0,
        focus: function (evt) {
            $("#dialog").dialog().children("input").focus();
        }
    }
}
//...

Fiddle

在所有编辑器上处理焦点事件（并删除它）会使它们无法编辑，从而破坏了它们的目的。如果这就是您所追求的，这几乎感觉就像使用row edit template（是的，您仍然可以使用编辑器事件在那里弹出一个对话框）。如果你让我更深入地了解对话背后的想法究竟是什么，我可能会提供更多的方法来做到这一点:)