Question

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

我有两个不同的列表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分支。

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

1 个答案: