UI元件Kendo UI for jQuery資料管理入門指南 - TaskBoard/列
阿新 • • 發佈：2022-04-13
Kendo UI TaskBoard在列（通道）中顯示按特定標準分組的卡片，列的不同方面，例如列寬、模板的使用、列中呈現的按鈕等，可以通過 columnSettings 配置進行控制，這對所有列都有效。
列設定
任務板列中呈現的預設按鈕為：編輯列、新增卡片和刪除列。
以下示例演示如何通過設定寬度來自定義列並僅顯示三個預設列按鈕當中的一個。
<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
dataOrderField: "order",
dataSource: [
{ id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
{ id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
{ id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
{ id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
{ id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
],
columns: [
{ text: "Doing", status: "doing" },
{ text: "Backlog", status: "backlog" },
{ text: "Done", status: "done" }
],
columnSettings: {
width: 200,
buttons: ["addCard"]
}
});
</script>列命令
可用的列命令是：
- AddColumnCommand
- EditColumnCommand
- DeleteColumnCommand
- SaveColumnCommand
- CancelEditColumnCommand
除了預設按鈕之外，您還可以選擇將自定義按鈕新增到任務板列。
以下示例演示如何使用 columnSettings 配置新增自定義按鈕，建立自定義命令，在單擊自定義按鈕時觸發。
<div id="taskBoard"></div>
<script>
$("#taskBoard").kendoTaskBoard({
dataOrderField: "order",
dataSource: [
{ id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "red" },
{ id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "red" },
{ id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "green" },
{ id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "green" },
{ id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "blue" }
],
columns: [
{ text: "Backlog", status: "backlog" },
{ text: "Doing", status: "doing" },
{ text: "Done", status: "done" }
],
columnSettings: {
buttons: [{ name: "CustomButton", text: "My Custom Tool", icon: "gear", command: "MyCustomCommand", options: "myvalue" }]
}
});
kendo.ui.taskboard.commands["MyCustomCommand"] = kendo.ui.taskboard.Command.extend({
exec: function () {
var taskboard = this.taskboard;
var options = this.options;
var column = options.column;
var columnElm = options.columnElement;
columnElm.css("border", "solid red 3px");
alert(kendo.format("Custom command executed for column with status {0} and value {1}", column.get("status"), options.value));
}
});
</script>Kendo UI for jQuery是完整的jQuery UI元件庫，可快速構建出色的高效能響應式Web應用程式。Kendo UI for jQuery提供在短時間內構建現在Web應用程式所需要的一切，從多個UI元件中選擇，並輕鬆地將它們組合起來，創建出酷炫響應式的應用程式，同時將開發時間加快了50%。