向剑道网格显示添加自定义验证
Adding custom validation to Kendo Grid display?
我们有一个内部工具，用来批量向数据库添加用户。为此，用户将上传一个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");
}
});
编辑
张贴一个可能的解决方案
好吧，我已经玩了这一天的大部分时间，我相信我已经想出了一些工作，但我不确定是否有一个更好的方法。
我修改了我的初始对象结构如下:
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;
}
现在剑道网格似乎真的讨厌复杂的对象，所以这需要一些认真的调整。
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");
}
相关文章：
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 添加自定义标记以自动完成
- 微笑时间轴小部件添加自定义字段
- 在验证器中添加自定义规则以检查<ul>具有元素
- 在log4javascript中添加自定义日志级别
- 向ASP控件添加自定义事件
- 在“添加自定义按钮”旁边添加自定义按钮;添加到CART”;WooCommerce的按钮
- 在标记mapbox.js上添加自定义图标
- 如何使用inlineformset_factory添加自定义字段属性
- 如何在 Rails 应用程序中向 Galleria 添加自定义描述
- 使用原型对象向javascript对象添加自定义属性和方法的建议
- WordPress，添加自定义JS和Foundation JS
- 如何在wooccommerce脚本之后添加自定义java脚本
- Wordpress:添加自定义HTML文件
- 在jqGrid中的行中添加自定义按钮
- 如何在联系人表单7 Wordpress中添加自定义javascript函数
- 如何在自定义帖子类型中添加自定义字段
- 如何使用Google Analytics添加自定义事件跟踪
- 如何在Javascript中向存储类添加自定义方法
- 如何向AlloyUI表单生成器添加自定义属性
