Question

我们有一个内部工具，我们将其用于批量添加用户到我们的数据库。为此，用户将上载CSV文件，该文件在客户端读取并显示在Kendo Grid中。

我尝试实施某种形式的验证，将集合推送到Web服务并返回经过验证的集合，显示哪些字段需要更正，以及哪些字段有效。

目前，该对象的结构如下：

export interface IBulkUserObject {
    FirstName: string;
    GlobalLogin: string;
    JobTitle?: string;
    LastName: string;
    Organization?: string;
    PhoneNumber: string;
}

基本上我需要弄清楚如何对这个对象进行基本验证。显然，从客户端获取此信息非常简单，但我不完全确定如何表示哪些字段有效且哪些字段无效，然后将此信息传递给kendo网格

this.fullGrid = $("#verifyGrid").kendoGrid({
    dataSource: {
        data: this.gridData,
        schema: {
            model: {
                id: "GlobalLogin",
                fields: {
                    Organization: { type: "string" },
                    GlobalLogin: { type: "string" },
                    FirstName: { type: "string" },
                    LastName: { type: "string" },
                    PhoneNumber: { type: "string" },
                    JobTitle: { type: "string" }
                }
            }
        },
        pageSize: 100
    },
    height: 650,
    scrollable: true,
    sortable: true,
    filterable: true,
    pageable: {
        input: true,
        numeric: false
    },
    columns: [
        { command: ["edit"], width: "100px" },
        {
            field: "Organization",
            title: "Organization",
            width: "200px"
        },
        {
            field: "GlobalLogin",
            title: "Global Login",
            width: "200px"
        },
        {
            field: "FirstName",
            title: "First Name",
            width: "200px"
        },
        {
            field: "LastName",
            title: "Last Name",
            width: "200px"
        },
        {
            field: "PhoneNumber",
            title: "Phone Number",
            width: "200px"
        },
        {
            field: "JobTitle",
            title: "Job Title",
            width: "200px"
        }
    ],
    editable: "inline",
    save() {
        alert("edited");
    }
});

修改

发布了一个可能的解决方案。

Answer 1

嗯，我在一天的大部分时间里一直在玩这个，我相信我已经找到了一些有用的东西，但是我不确定是否有＃sa更好的方法。

我将我的初始对象结构修改为以下内容：

export interface IBulkUserObjectTest {
    Email?: string;
    FirstName: IVerificationProperty<string>;
    GlobalLogin: IVerificationProperty<string>;
    JobTitle?: IVerificationProperty<string>;
    LastName: IVerificationProperty<string>;
    Organization?: IVerificationProperty<string>;
    PhoneNumber: IVerificationProperty<string>;
}

export interface IVerificationProperty<T> {
    Value?: T;
    Valid: boolean;
    VerificationMessage?: string;
}

但是，由于我的CSV仍然生成了一个扁平对象，我需要对数据进行整形，因此我创建了一种方法：

private shapeGridData = (data: Array<Models.IBulkUserObject>): Array<Models.IBulkUserObjectTest> => {
    var newItems: Array<Models.IBulkUserObjectTest> = new Array();
    data.forEach(item => {
        var newItem: Models.IBulkUserObjectTest = {
            Organization: { Value: item.Organization, Valid: true },
            GlobalLogin: { Value: item.GlobalLogin, Valid: true },
            Email: item.GlobalLogin,
            FirstName: { Value: item.FirstName, Valid: true },
            LastName: { Value: item.LastName, Valid: true },
            PhoneNumber: { Value: item.PhoneNumber, Valid: true },
            JobTitle: { Value: item.JobTitle, Valid: true }
        };
        newItems.push(newItem);
    });

    return newItems;
}

现在Kendo网格似乎真的讨厌复杂的对象，因此需要进行一些严肃的调整。

this.fullGrid = $("#verifyGrid").kendoGrid({
    dataSource: {
        data: this.gridDataVerified,
        schema: {
            model: {
                id: "Email",
                fields: {
                    Email: { },
                    GlobalLogin: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    Organization: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    FirstName: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    LastName: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    PhoneNumber: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    CompanyName: [{ Value: { type: "string" }, Valid: { type: "boolean" } }],
                    JobTitle: [{ Value: { type: "string" }, Valid: { type: "boolean" } }]
                }
            }
        },
        pageSize: 100
    },
    height: 650,
    scrollable: true,
    sortable: true,
    filterable: true,
    pageable: {
        input: true,
        numeric: false
    },
    columns: [
        { command: ["edit"], width: "100px" },
        {
            field: "GlobalLogin",
            title: "Global Login",
            width: "200px",
            template: "<span #= GlobalLogin.Valid ? \"\" : 'class=\"errorClass\"' #>#=GlobalLogin.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
            //template: "<span #= GlobalLoginValid ? \"\" : 'class=\"errorClass\"' #>#: GlobalLogin #</span>"
        },
        {
            field: "Organization",
            title: "Organization",
            width: "200px",
            template: "<span #= Organization.Valid ? \"\" : 'class=\"errorClass\"' #>#=Organization.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        },
        {
            field: "FirstName",
            title: "First Name",
            width: "200px",
            template: "<span #= FirstName.Valid ? \"\" : 'class=\"errorClass\"' #>#=FirstName.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        },
        {
            field: "LastName",
            title: "Last Name",
            width: "200px",
            template: "<span #= LastName.Valid ? \"\" : 'class=\"errorClass\"' #>#=LastName.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        },
        {
            field: "PhoneNumber",
            title: "Phone Number",
            width: "200px",
            template: "<span #= PhoneNumber.Valid ? \"\" : 'class=\"errorClass\"' #>#=PhoneNumber.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        },
        {
            field: "JobTitle",
            title: "Job Title",
            width: "200px",
            template: "<span #= JobTitle.Valid ? \"\" : 'class=\"errorClass\"' #>#=JobTitle.Value#</span>",
            editor(container, options) {
                el.kendoEditor(container, options);
            }
        }
    ],
    editable: "inline",
    save() {
        alert("Postback");
    }
});

最后，我必须修改编辑器，以便它知道我在编辑什么以及在哪里，所以我创建了一个函数来做到这一点。

private kendoEditor = (container, options) => {
    var input = $("<input/>");
    input.attr("name", options.field + ".Value");
    input.appendTo(container);
    input.addClass("k-input k-textbox");
}

在Kendo Grid显示中添加自定义验证？

修改

1 个答案: