翻譯|使用教程|編輯:龔雪|2022-05-17 10:14:00.000|閱讀 228 次
概述:本文主要為大家介紹Kendo UI for jQuery控件的任務板是如何添加工具欄的,歡迎下載最新版控件體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
默認情況下,Kendo UI TaskBoard的工具欄顯示addColumn 和搜索工具??梢耘懦J工具,也可以通過工具欄配置添加自定義工具。
toolbar.items 配置允許您設置在任務板的工具欄中呈現的所需工具,工具可以作為字符串或對象添加到項目集合中,以防需要額外的配置。
以下示例演示如何將自定義工具添加到工具欄。
<div id="taskBoard"></div> <script> $("#taskBoard").kendoTaskBoard({ toolbar: { items: [ { type: "button", text: "Add Card", name: "addCard", text: "Add New Card", command: "CustomAddCardCommand", icon: "plus", showText: true }, "spacer", "search" ] }, 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" } ] }); kendo.ui.taskboard.commands["CustomAddCardCommand"] = kendo.ui.taskboard.Command.extend({ exec: function () { var taskboard = this.taskboard; var options = this.options; taskboard.addCard({ status: "doing", title: "Add Title", description: "Add Description", category: "green" }); taskboard.dataSource.sync(); } }); </script>
Kendo UI for jQuery是完整的jQuery UI組件庫,可快速構建出色的高性能響應式Web應用程序。Kendo UI for jQuery提供在短時間內構建現在Web應用程序所需要的一切,從多個UI組件中選擇,并輕松地將它們組合起來,創建出酷炫響應式的應用程序,同時將開發時間加快了50%。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都網