Question

我正在尝试让TAB键导航到我的dGrid。我已经在Dgrid set focus on cell找到了解决方案的基础，但是我遇到了一些我目前无法解决的问题。

下面你可以找到我正在使用的块;并非所有列都有编辑器，因此我添加了一个var来执行元素定义以选择下一列而不是执行right。我还添加了对SHIFT+TAB的支持，以便可以进行向后导航。 MT4.prje.grids[gridId]是dGrid实例。页面上可能有各种各样的内容。

使用

创建网格

MT4.prje.grids[gridId] = new (declare([OnDemandGrid, Keyboard, Selection, CellSelection]))(gridInfo, gridId);

其中gridInfo包含列定义和商店。商店创建为：

new Observable(new Memory({'data': {}, 'idProperty': 'id'}));

编辑器通常是TextBox，NumberTextBox和Select dijit小部件，都设置为autoSave。

aspect.after(MT4.prje.grids[gridId], "edit", function (promise, cellNode) {
    if (promise === null) return;

    promise.then(function (widget) {
        if (!widget._editorKeypressHandle) {
            widget._editorKeypressHandle = on(widget, "keypress", function (e) {

                for (var rowId in MT4.prje.grids[gridId].selection) {
                    break;
                }
                for (var columnId in MT4.prje.grids[gridId].selection[rowId]) {
                    break;
                }

                if (e.charOrCode == keys.TAB) {
                    e.preventDefault();

                    var cellToEdit = null,
                        cellEdited = MT4.prje.grids[gridId].cell(rowId, columnId);

                    if (e.shiftKey) {
                        if (cellEdited.column.previousEditor === undefined) {
                            rowId = parseInt(rowId) - 1;
                            if (MT4.prje.grids[gridId].row(rowId).element !== null) {
                                for (var lastColumnId in MT4.prje.grids[gridId].columns) {}
                                cellToEdit = MT4.prje.grids[gridId].cell(rowId, lastColumnId);
                            }
                        } else {
                            cellToEdit = MT4.prje.grids[gridId].cell(rowId, cellEdited.column.previousEditor);
                        }
                    } else {
                        if (cellEdited.column.nextEditor === undefined) {
                            var firstColumnId = null;
                            rowId = parseInt(rowId) + 1;
                            if (MT4.prje.grids[gridId].row(rowId).element === null) {
                                var fields = {};
                                for (var cId in MT4.prje.grids[gridId].columns) {
                                    if ((cId != 'excluir') && (firstColumnId === null)) {
                                        firstColumnId = cId;
                                    }
                                    fields[cId] = '';
                                }
                                MT4.prje.addRowToGrid(gridId, fields);
                            } else {
                                for (var cId in MT4.prje.grids[gridId].columns) {
                                    if (cId != 'excluir') {
                                        firstColumnId = cId;
                                        break;
                                    }
                                }
                            }

                            cellToEdit = MT4.prje.grids[gridId].cell(rowId, firstColumnId);
                        } else {
                            cellToEdit = MT4.prje.grids[gridId].cell(rowId, cellEdited.column.nextEditor);
                        }
                    }

                    if (cellToEdit) {
                        MT4.prje.grids[gridId].deselect(cellEdited);
                        MT4.prje.grids[gridId].select(cellToEdit);
                        MT4.prje.grids[gridId].edit(cellToEdit);

                    }
                }
            });
        }
    });
});

即使忽略新的线路部分，也会发生一些错误。首先，编辑器几乎不存在，它们随着选择而消失。有时，当标签到空列时，编辑器将填充前一个编辑器的值。有没有办法更一致地做到这一点？

我所知道的是，sharedEditor上发生了竞争条件（它们被设置为editOn: focus）。我尝试在dojo.on（'blur'）上包装取消选择/选择并发出它。但是dijit/form/Select窗口小部件并没有始终如一。是否有一个更好的事件，我可以呼吁它？

我也尝试将最终版块更改为：

if (cellToEdit) {
    on(cellToEdit.element, 'focus', function(){
        MT4.prje.grids[gridId].select(cellToEdit);
    });

    on(cellEdited.element, 'blur', function(){
        MT4.prje.grids[gridId].deselect(cellEdited);
        on.emit(cellToEdit.element, 'focus', {'bubble': true, 'cancelable': false});
    });

    on.emit(cellEdited.element, 'blur', {'bubble': true, 'cancelable': false});
}

但是这会产生两个错误：

如果我对单元格进行了更改，则不会转到下一个编辑器。甚至不选择它。
我第一次从空单元格移动到另一个空单元格时，它也不起作用。

有人有任何想法吗？

Answer 1

此修复程序适用于dgrid 0.3.11。

添加到你的dgrid的postCreate。

postCreate: function() {
    var that = this;
    this.inherited(arguments);

    this.on('dgrid-datachange', function(evt) {
        that._selectedCell = that.cell(evt);
    });

    aspect.after(this, 'save', function(dfd) {
        dfd.then(function() {
            var nextCell = that.right(that.cell(that._selectedCell.row.id, that._selectedCell.column.id));
            that.edit(nextCell);
            // Bonus Fix. Workaround dgrid bug that blocks field text to be selected on focus.
            nextCell.element.widget && nextCell.element.widget.textbox && nextCell.element.widget.textbox.select();
        });
    });
}

无法让TAB更改dgrid上的编辑器

1 个答案: