如何对 Slickgrid 的 TextCellEditor 进行子类化?

发布于 2024-10-09 12:03:05 字数 2288 浏览 8 评论 0原文

如何对 Slickgrid 的 TextCellEditor 进行子类化?

我想使用 统一库 来设置 slickgrid 中使用的编辑器的样式;为此,我需要

$("input, textarea, select, button").uniform();

在生成 html 后调用;换句话说,在调用编辑器对象的 init 函数之后;目前,我只是复制整个编辑器源代码并将该行添加到 init 函数末尾之前。我只是看起来不优雅。

编辑:

为了让不熟悉 slickgrid 的人清楚,这里是代码:

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

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

                $input.uniform();
        };

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

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

        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() {
            if (args.column.validator) {
                var validationResults = args.column.validator($input.val());
                if (!validationResults.valid)
                    return validationResults;
            }

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

        this.init();
    }

其中 $input.uniform(); 是唯一与默认 TextCellEditor 不同的行。

How do I subclass the TextCellEditor of Slickgrid?

I want to style the editors used in slickgrid using the uniform library; to do so I need to call

$("input, textarea, select, button").uniform();

after the html is generated; in other words after the editor object's init function is called; Currently I just copy the entire editor source code and add that line just before the end of the init function. I just seems non elegant.

edit:

to be clear to people unfamiliar with slickgrid, here is the code:

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

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

                $input.uniform();
        };

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

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

        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() {
            if (args.column.validator) {
                var validationResults = args.column.validator($input.val());
                if (!validationResults.valid)
                    return validationResults;
            }

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

        this.init();
    }

Where $input.uniform(); is the only line that is different from the default TextCellEditor.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

望她远 2024-10-16 12:03:05

您可以使用 .live() 将 .ready() 事件绑定到按类生成的 html 内容,因此它适用于所有未来的内容,而不仅仅是初始 DOM 中存在的内容。

所以...

$('.classOfSlickGrid').live('ready', function() {
    $("input, textarea, select, button").uniform();
}

You could bind a .ready() event to the generated html content by class using .live() so it applies to all future content, not just content present in the initial DOM.

So...

$('.classOfSlickGrid').live('ready', function() {
    $("input, textarea, select, button").uniform();
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文