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

Question

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

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

             $("#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 作为例子就好了，但可能是其他东西绑定(bind)到那个将焦点返回到行的事件，你可以尝试更改代码要添加的 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();
});

工作 fiddle here

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