UI元件Kendo UI for jQuery資料管理教程 - TaskBoard/資源
阿新 • • 發佈:2022-05-06
Kendo UI TaskBoard 資源是可以與卡片關聯的可選元資料,TaskBoard 支援單例項和多例項資源。
單例項資源
單例項資源是指只能將一個例項分配給一個TaskBoard卡片的資源,例如顯示不同優先順序任務的TaskBoard,每張卡片可以有一個優先順序。
以下示例演示瞭如何使用單個例項資源。
<div id="taskBoard"></div> <script> $("#taskBoard").kendoTaskBoard({ resources: [{ field: "category", dataColorField: "Color", dataTextField: "Text", dataValueField: "Value", dataSource: [ { Value: "urgent", Text: "Urgent", Color: "orange" }, { Value: "highpriority", Text: "High Priority", Color: "blue" }, { Value: "lowpriority", Text: "Low Priority", Color: "green" } ] }], dataSource: [ { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "urgent" }, { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "urgent" }, { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "highpriority" }, { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "lowpriority" }, { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "lowpriority" } ], columns: [ { text: "Doing", status: "doing" }, { text: "Backlog", status: "backlog" }, { text: "Done", status: "done" } ] }); </script>
多例項資源
多例項資源是可以將多個例項分配給任務板卡的資源,例如顯示問題列表的任務板。 每個問題可以同時具有不同的標籤,例如bug, client-side, high severity。
以下示例演示瞭如何使用多例項資源。
<div id="taskBoard"></div> <script id="card-template" type="text/x-kendo-template"> <div class="template-container"> <div class="template-header"> <p><a class="k-card-title k-link" href="" data-command="SelectCardCommand">#: title #</a></p> </div> <p>#:description#</p> <p>Tags: # for (var i = 0; i < resources.tags.length; i++) { # <span style="color: #:resources.tags[i].color#">#:resources.tags[i].text#</span> # } # </p> </div> </script> <script> $("#taskBoard").kendoTaskBoard({ resources: [{ field: "tags", multiple: true, dataSource: [ { value: "bug", text: "Bug", color: "gray" }, { value: "feature", text: "Feature", color: "orange" }, { value: "client-side", text: "Client-side", color: "blue" }, { value: "server-side", text: "Server-side", color: "green" } ] }], template: $("#card-template").html(), dataSource: [ { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", tags: [ "bug", "client-side" ] }, { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", tags: [ "feature", "client-side" ] }, { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", tags: [ "feature", "server-side" ] }, { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", tags: [ "chore", "client-side" ] }, { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", tags: [ "chore", "server-side" ] } ], columns: [ { text: "Doing", status: "doing" }, { text: "Backlog", status: "backlog" }, { text: "Done", status: "done" } ] }); </script>
Kendo UI for jQuery是完整的jQuery UI元件庫,可快速構建出色的高效能響應式Web應用程式。Kendo UI for jQuery提供在短時間內構建現在Web應用程式所需要的一切,從多個UI元件中選擇,並輕鬆地將它們組合起來,創建出酷炫響應式的應用程式,同時將開發時間加快了50%。