Kendo UI TaskBoard允許您輕松組織項目并跟蹤它們的狀態，TaskBoard提供了一個干凈且用戶友好的界面，使您能夠管理任務、筆記、項目、人員或其他類型的項目。 該組件顯示列（通道），可以表示不同類型的項目/任務狀態。 任務被可視化為卡片，可以通過模板輕松定制。 您可以對列中的卡片重新排序，或將它們拖放到另一列中。

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

TaskBoard 提供了將其綁定到本地數組和遠程數據的選項。

綁定到本地數據

下面的示例演示如何將 TaskBoard 綁定到本地數據數組。

<div id="taskBoard"></div>

<script>
var cardsData = [
{ id: 1, title: "Campaigns", order: 1, description: "Create a new landing page for campaign", status: "todo", color: "orange" },
{ id: 2, title: "Newsletters", order: 2, description: "Send newsletter", status: "todo", color: "blue" },
{ id: 3, title: "Ads Analytics", order: 3, description: "Review ads performance", status: "todo", color: "green" },
{ id: 4, title: "SEO Analytics", order: 4, description: "Review SEO results", status: "inProgress", color: "blue" },
{ id: 5, title: "Customer Research", order: 5, description: "Interview focus groups", status: "inProgress", color: "orange" },
{ id: 6, title: "Testimonials & Case Studies", order: 6, description: "Publish new case study", status: "done", color: "green" },
{ id: 7, title: "Content", order: 7, description: "Plan content for podcasts", status: "done", color: "green" },
{ id: 8, title: "Customer Journey", order: 8, description: "Update virtual classrooms' experience", status: "done", color: "blue" },
];

$("#taskBoard").kendoTaskBoard({
columns: [
{ text: "To-Do", status: "todo" },
{ text: "In Progress", status: "inProgress" },
{ text: "Done", status: "done" }
],
dataSource: {
data: cardsData,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
order: { type: "number", defaultValue: 0 },
title: { field: "title", defaultValue: "No title" },
description: { field: "description", validation: { required: true } },
}
}
}
},
dataStatusField: "status",
dataOrderField: "order",
dataCategoryField: "color",
height: 750,
resources: [
{
field: "color",
dataSource: [
{ value: "orange", color: "#ffa500" },
{ value: "green", color: "#008000" },
{ value: "blue", color: "#0000ff" }
]
}
]
});
</script>

綁定到遠程數據

您還可以將任務板綁定到遠程數據，遠程數據綁定支持從服務器檢索數據。

下面的示例演示如何通過設置 DataSource 傳輸配置來為 TaskBoard 啟用遠程綁定。

<div id="taskBoard"></div>

<script>
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";

$("#taskBoard").kendoTaskBoard({
columnSettings: {
dataTextField: "Text",
dataStatusField: "Status",
dataOrderField: "Order",

},
columns: {
transport: {
read: {
url: crudServiceBaseUrl + "/taskboard/columns"
}
},
schema: {
model: {
id: "ID",
fields: {
"ID": { type: "number" },
"Text": { type: "string" },
"Status": { type: "string", defaultValue: "todo" },
"Order": { type: "number" }
}
}
}
},
dataCategoryField: "Category",
dataDescriptionField: "Description",
dataTitleField: "Title",
dataStatusField: "Status",
dataOrderField: "Order",
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/taskboard"
},
update: { // Update operation is required in order for cards to be moved across columns
url: crudServiceBaseUrl + "/taskboard/update",
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" }
}
}
}
},
resources: [{
field: "Category",
title: "Priority",
dataSource: [
{ value: "urgent", text: "Urgent", color: "orange" },
{ value: "highpriority", text: "High Priority", color: "blue" },
{ value: "lowpriority", text: "Low Priority", color: "green" }
]
}],
editable: false,
cardMenu: false,
height: 750
});
</script>

Kendo UI for jQuery | 下載試用

Kendo UI for jQuery是完整的jQuery UI組件庫，可快速構建出色的高性能響應式Web應用程序。Kendo UI for jQuery提供在短時間內構建現在Web應用程序所需要的一切，從多個UI組件中選擇，并輕松地將它們組合起來，創建出酷炫響應式的應用程序，同時將開發時間加快了50%。