0

別の質問のアドバイスに従いましたが、うまくいきません。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();
}
4

1 に答える 1

0

一部の SlickGrid 列のエディターとして Kendo UI ComboBox を使用しています。キーボード ナビゲーションの動作を修正するために行ったことを確認してください。

まず、グリッドを作成するためのコードといくつかの補助関数:

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メソッドでこれらの関数を呼び出します。

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

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

このソリューションを出発点として使用して、自分のソリューションを詳しく説明できます。

于 2012-12-16T18:39:22.653 に答える