Question

我已经听从了另一个问题的建议，但这对我不起作用。我正在使用JQuery 1.8.3和JQuery UI 1.9.2

当我按箭头键时，自动完成功能不会选择下一个选项。为什么呢？

我在每个事件处理程序上都尝试过stopPropagation。我使用过按键，键盘，键盘，处理程序。我甚至将我的输入元素包装在父标记中，并对这些事件设置了stopPropagation，并且箭头键仍然无法在自动完成元素上运行。他们只是试图改变验证器函数阻止的单元格。

$input.bind("keydown.nav", function (e) {function AutoCompleteEditor(args) {
        var $input,
                defaultValue,
                scope = this;

        this.init = function () {
                $input = $("<INPUT type=text class='editor-text' />");
                $input.appendTo(args.container)
                        .focus()
                        .select()
                        .autocomplete({
                                delay: 0,
                                minLength: 0,
                                source: args.column.options
                        })
                        .bind("keydown.nav", function (e) {
                                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                                        e.stopImmediatePropagation();
                                        e.stopPropagation();
                                } else if (e.keyCode === $.ui.keyCode.UP || e.keyCode === $.ui.keyCode.DOWN) {
                                        e.stopImmediatePropagation();
                                        e.stopPropagation();
                                }
                        })
        };

        this.destroy = function () {
                $input.autocomplete('destroy');
                $input.remove();
        };

        this.focus = function () {
                $input.focus();
        };

        this.getValue = function () {
                return $input.val();
        };

        this.setValue = function (val) {
                $input.val(val);
        };

        this.loadValue = function (item) {
                defaultValue = item[args.column.field] || "";
                $input.val(defaultValue);
                $input[0].defaultValue = defaultValue;
                $input.select();
        };

        this.serializeValue = function () {
                return $input.val();
        };

        this.applyValue = function (item, state) {
                item[args.column.field] = state;
        };

        this.isValueChanged = function () {
                return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
        };

        this.validate = function () {
                var val = $input.val();
                return {
                        valid: args.column.options.indexOf(val) > -1,
                        msg: null
                };
        };

        this.init();
}

Answer 1

我使用Kendo UI ComboBox作为某些SlickGrid列的编辑器。请检查我为修复键盘导航行为所做的工作。

首先，一些代码用于创建网格和一些辅助功能：

var data = []; // some data
var columns = []; // some columns
var options = {
    editable: true,
    autoEdit: false
};
var grid = new Slick.Grid('#myGrid', data, columns, options);
grid.render();

function editing_keydown(e, args) {
    if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
        if (e.which >= 37 && e.which <= 40) {
            e.stopImmediatePropagation();
        }
    }
}

function disableGridCellNavigation() {
    grid.onKeyDown.subscribe(editing_keydown);
};

function enableGridCellNavigation() {
    grid.onKeyDown.unsubscribe(editing_keydown);
};

然后，在编辑器代码中，我在 init 和 destroy 方法中调用这些函数：< / p>

this.init = function() {
    // initialization stuff
    // last line:
    disableGridCellNavigation();
};

this.destroy = function () {
    // termination stuff
    // last line:
    enableGridCellNavigation();
};

您可以使用此解决方案作为阐述您的解决方案的起点。

如何使用JQuery UI 1.9.2创建自动完成SlickGrid编辑器

1 个答案: