Kendo UI TaskBoard允許列和卡片編輯，預設情況下，列和卡片都啟用了TaskBoard中的編輯。

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

編輯配置

要設定編輯：

1. 配置TaskBoard的transport和schema資料來源選項。

2. 設定editable配置（可選）。

以下示例演示如何為 TaskBoard 的列和卡片配置 CRUD（建立、讀取、更新、銷燬）資料操作。

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

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

var priorities = new kendo.data.DataSource({
data: [
{ value: "urgent", text: "Urgent", color: "orange" },
{ value: "highpriority", text: "High Priority", color: "blue" },
{ value: "lowpriority", text: "Low Priority", color: "green" }
]
});

$("#taskBoard").kendoTaskBoard({
columnSettings: {
dataTextField: "Text",
dataStatusField: "Status",
dataOrderField: "Order"
},
columns: {
transport: {
read: {
url: crudServiceBaseUrl + "/taskboard/columns"
},
create: {
url: crudServiceBaseUrl + "/taskboard/columns_create",
method: "POST"
},
update: {
url: crudServiceBaseUrl + "/taskboard/columns_update",
method: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/taskboard/columns_destroy",
method: "POST"
}
},
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"
},
create: {
url: crudServiceBaseUrl + "/taskboard/create",
method: "POST"
},
update: {
url: crudServiceBaseUrl + "/taskboard/update",
method: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/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" }
}
}
}
},
resources: [{
field: "Category",
title: "Priority",
dataSource: priorities
}],
previewPane: {
template: "<p>#:Description#</p>" +
"<p>#:resources.Category.title#: <span style='background-color: #:resources.Category.color#'>&nbsp;</span> #:resources.Category.text#</p>"
},
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: "<span style='background-color: #:color#'>&nbsp;</span> #:text#",
valueTemplate: "<span style='background-color: #:color#'>&nbsp;</span> #:text#"
}
}]
}
},
height: 750
});
</script>

配置資料來源

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: "<span style='background-color: #:color#'>&nbsp;</span> #:text#",
valueTemplate: "<span style='background-color: #:color#'>&nbsp;</span> #:text#"
}
}]
}
}

Kendo UI for jQuery | 下載試用

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

瞭解最新Kendo UI最新資訊，請關注Telerik中文網！