UI元件Kendo UI for jQuery資料管理教程 - TaskBoard/模板
阿新 • • 發佈:2022-05-11
TaskBoard使用Kendo UI模板提供對列、卡片和彈出標題呈現的完全控制。
TaskBoard支援以下模板:
- 卡片模板
- 列模板
- 可編輯的標題模板
- 預覽面板模板
- 預覽面板標題模板
卡片模板
卡片模板控制卡片的呈現。
<script id="card-template" type="text/x-kendo-template"> #:title# #=cardMenuButton# #:description# </script> <script> $("#taskBoard").kendoTaskBoard({ template: $("#card-template").html(), 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" } ] }); </script>
列模板
列模板控制列標題的呈現。 在模板上下文中,按鈕欄位為列的按鈕提供 HTML。
<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: { template: '<div class="k-taskboard-column-header-actions" style="background-color: lightgray">#=buttons#</div>' + '<span class="k-spacer"></span>' + '<div class="k-taskboard-column-header-text k-text-ellipsis">#:text#(#:status#)</div>' } }); </script>
可編輯的標題模板
可編輯的標題模板控制標題的呈現。
<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" } ], editable: { headerTemplate: "<div class='k-taskboard-pane-header-text'>Editing <strong>#:title#</strong></div>" } }); </script
預覽面板模板
預覽面板模板控制預覽面板的呈現。
<div id="taskBoard"></div> <script> $("#taskBoard").kendoTaskBoard({ previewPane: { template: "<p>#:description#</p><p>Category: #:category#</p>" }, 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" } ] }); </script>
預覽面板標題模板
預覽面板標題模板控制預覽面板標題的呈現。
<div id="taskBoard"></div> <script> $("#taskBoard").kendoTaskBoard({ previewPane: { headerTemplate: "<div class='k-taskboard-pane-header-text'>Viewing <strong>#:title#</strong></div>" }, 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" } ] }); </script>
Kendo UI for jQuery是完整的jQuery UI元件庫,可快速構建出色的高效能響應式Web應用程式。Kendo UI for jQuery提供在短時間內構建現在Web應用程式所需要的一切,從多個UI元件中選擇,並輕鬆地將它們組合起來,創建出酷炫響應式的應用程式,同時將開發時間加快了50%。