UI组件Kendo UI for jQuery数据管理入门指南 - TaskBoard/编辑

Kendo UI TaskBoard允许列和卡片编辑，默认情况下，列和卡片都启用了TaskBoard中的编辑。

Kendo UI for jQuery最新官方正式版下载

编辑配置

要设置编辑：

1. 配置TaskBoard的transport和schema数据源选项。

2. 设置editable配置（可选）。

以下示例演示如何为 TaskBoard 的列和卡片配置 CRUD（创建、读取、更新、销毁）数据操作。

配置数据源

TaskBoard 为其列和卡片使用两个不同的数据源实例。

注意：

• 在transport配置中定义数据操作。
• 在 schema.model.id 中定义数据项的 id 字段，这可确保正确添加、编辑和删除项目。
• 定义模型字段。

以下示例演示如何配置列的数据源。

columns: {
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/taskboard/columns"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/taskboard/columns_create",
method: "POST"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/taskboard/columns_update",
method: "POST"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/taskboard/columns_destroy",
method: "POST"
}
},
schema: {
model: {
id: "ID",
fields: {
"ID": { type: "number" },
"Text": { type: "string" },
"Status": { type: "string", defaultValue: "todo" },
"Order": { type: "number" }
}
}
}
}

以下示例演示如何配置卡片的数据源。

dataSource: {
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/taskboard"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/taskboard/create",
method: "POST"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/taskboard/update",
method: "POST"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/taskboard/destroy",
method: "POST"
}
},
schema: {
model: {
id: "ID",
fields: {
"ID": { type: "number" },
"Category": { type: "string", defaultValue: "lowpriority" },
"Description": { type: "string" },
"Title": { type: "string", validation: { required: true } },
"Status": { type: "string", defaultValue: "todo" },
"Order": { type: "number" }
}
}
}
}

设置可编辑选项

默认情况下启用编辑，但可编辑配置公开了许多自定义选项。

以下示例演示了如何设置editable配置。

editable: {
form: {
buttonsTemplate: "",
items: [{
field: "Title",
label: "Title:"
}, {
field: "Description",
label: "Description:"
}, {
field: "Category",
label: "Priority:",
editor: "DropDownList",
editorOptions: {
dataTextField: "text",
dataValueField: "value",
dataSource: priorities,
template: "  #:text#",
valueTemplate: "  #:text#"
}
}]
}
}

Kendo UI for jQuery | 下载试用

Kendo UI for jQuery是完整的jQuery UI组件库，可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现在Web应用程序所需要的一切，从多个UI组件中选择，并轻松地将它们组合起来，创建出酷炫响应式的应用程序，同时将开发时间加快了50%。

了解最新Kendo UI最新资讯，请关注Telerik中文网！