Question

我们正在开发一个绑定到REST端点的Kendo UI网格。消息传递部分运行良好。

我们遇到麻烦的地方是试图掩盖电话号码输入。我们喜欢以下行为：

1）用户点击进入电话号码单元格。 2）用户输入1234567890。 3）离开单元格时，格式更改为（123）456-7890。

我们已经看过自定义格式了。那些似乎日期/时间和数字具体。我还没有找到为字符串列执行自定义格式的方法。

我们还研究了使用formatPhoneNumber函数执行此操作，该函数在每个单元格的更改事件上调用。我对这种方法不满意，尽管它确实有效。

这是网格的基本代码。我想找到一种方法来包含自定义格式，或者在定义列或字段属性时绑定到函数。

EditGridConfig = function() {
    var self = this;

    self.gridConfig = {
        columns: [
            { field: 'PhoneNumber', title: 'Phone Number', width: '150px' },
        ],
        data: [],
        toolbar: [
            { name: "save" },
            { name: "cancel" }
        ],
        dataSource: {
            type: "json",
            transport: {
                read: "/api/BusinessEntity",
                update: {
                    url: function(parent) {
                        return "/api/BusinessEntity/" + parent.Id;
                    },
                    dataType: "json",
                    type: "PUT"
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        PhoneNumber: { type: "string" },
                    }
                }
            }
        },
        editable: "incell"
    };

    self.selectedData = ko.observable();
};

这是我们用来获取焦点离开单元格时要格式化的电话号码的更改事件和formatPhoneNumber函数。我对这种方法不满意，并且正在寻找一种“更清洁”的方法。

change: function (e) {
    if (e.field == "PhoneNumber") {
        console.log('before' + e.items[0].PhoneNumber);
        e.items[0].PhoneNumber = formatPhoneNumber(e.items[0].PhoneNumber);
        console.log('after' + e.items[0].PhoneNumber);
    }
}

function formatPhoneNumber(number) {
    return number.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}

非常感谢任何建议！

Answer 1

很抱歉回答我自己的问题。我想我会在@James McConnell的回答的基础上添加更多细节，这样其他人就不会像我尝试用.mask函数连接jQuery.on事件那样挣扎。

感谢James的提示，我最后使用Masked Input jQuery plugin并使用jQuery.on连接动态创建的事件。

这是我写的辅助函数（例如简化）：

applyDynamicInputMask = function(container, selector, event, mask) {
    $(container).on(event, selector, function() {
        var $this = $(this);
        $this.mask(mask);
    });
};

并称之为：

applyDynamicInputMask(document, "[name='PhoneNumber']", 'focusin', "(999) 999-9999");

Answer 2

edit: function (e) {
    //if edit click
    if (!e.model.isNew()) {
        $('input[name=Time]').attr("data-role", "maskedtextbox").attr("data-mask", "00:00");
        //init mask widget
        kendo.init($('input[name=Time]'));
    }
}

Answer 3

您是否尝试过jQuery插件？我们在工作中使用这个：

http://digitalbush.com/projects/masked-input-plugin/

您可以将插件绑定到任何jQuery选择器，因此只需在需要格式化的输入上打一个自定义类，并使用它来连接插件。不确定这是否是一个可行的解决方案，但这是我过去使用的。 HTH！：）

如何屏蔽Kendo UI Grid Column中的电话号码输入

3 个答案: