在 SlickGrid 自定义编辑器中集成 TextExt

Question

我想在 SlickGrid 中使用 TextExt 实现自定义编辑器，但我在这样做时遇到了麻烦。

我有两个不同的列表 args.column.names 和 `args.column.values。 我希望标签显示选定的名称，但要发布相应 ID 的列表。

这是初稿，我真的不知道如何管理它。

有人可以帮我弄清楚在这些函数中写什么来匹配我想要做的事情吗？

function AutoCompletedTextField(args) {
    var $input;
    var defaultValue;
    var scope = this;

    this.init = function () {
        $input = $("<textarea class='textarea' rows='1'></textarea>")
            .appendTo(args.container)
            .bind("keydown.nav", function (e) {
                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                    e.stopImmediatePropagation();
                }
            })
            .focus()
            .select();

        $('.textarea').textext({
            plugins: 'tags autocomplete arrow'
        }).bind('getSuggestions', function (e, data) {
            var list = args.column.names,
                textext = $(e.target).textext()[0],
                query = (data ? data.query : '') || '';
            $(this).trigger('setSuggestions', { result: textext.itemManager().filter(list, query) });
        });

    };

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

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

    this.getValue = function () {
        return $input.textext()[0].hiddenInput().val();
    };

    this.setValue = function (val) {
        $input.textext()[0].hiddenInput().val(val)
    };

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

    this.serializeValue = function () {
        return $input[0].defaultValue;
    };

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

    this.isValueChanged = function () {
        return (!($input.textext()[0].hiddenInput().val() == "" && defaultValue == null)) && ($input.textext()[0].hiddenInput().val() != defaultValue);
    };

    this.validate = function () {
        if (args.column.validator) {
            var validationResults = args.column.validator($input.val());
            if (!validationResults.valid) {
                return validationResults;
            }
        }

        return {
            valid: true,
            msg: null
        };
    };

    this.init();
}

Answer 1

您可能想试试my repo，它已针对最新的 jQuery 进行了更新，并且有很多修复和增强功能。

其中一个增强功能是Select2 编辑器，它与您正在尝试执行的操作非常相似。我认为，如果您检查一下，就会清楚需要什么。
有一个example here。

作为奖励，还有一种机制允许某些键码冒泡到网格中，而不是被编辑器捕获。这对于向上箭头等很有用。这不在 MLeibman 分支中。