翻譯|行業(yè)資訊|編輯:龔雪|2022-03-31 10:24:20.820|閱讀 183 次
概述:本文主要為大家介紹Kendo UI for jQuery控件的任務(wù)板如何以卡片樣式顯示,歡迎下載最新版控件體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
Kendo UI TaskBoard將任務(wù)、筆記、項(xiàng)目或其他類型的項(xiàng)目顯示為按列(通道)中特定標(biāo)準(zhǔn)分組的卡片,卡片可以重新排序、放到另一列、編輯或刪除。
一張卡片可以處于以下三種狀態(tài)當(dāng)中的一個(gè):
您可以禁用/啟用單個(gè)卡,或列中的所有卡。
以下示例演示了如何禁用特定卡。
<div id="taskBoard"></div>
<script>
var taskBoard = $("#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" }
]
}).data("kendoTaskBoard");
taskBoard.enable(taskBoard.items().eq(0), false);
</script>
您還可以將只讀狀態(tài)設(shè)置為特定卡或列中的所有卡。
以下示例演示如何將列中的所有卡片設(shè)置為只讀。
<div id="taskBoard"></div>
<script>
var taskBoard = $("#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" }
]
}).data("kendoTaskBoard");
taskBoard.readOnlyByColumn(taskBoard.columns().eq(0));
</script>
TaskBoard在每張卡片中呈現(xiàn)一個(gè)菜單按鈕,提供刪除或編輯卡片的選項(xiàng),單擊它們將分別執(zhí)行 DeleteCardCommand 或 EditCardCommand。
可用的卡片命令有:
可以通過 cardMenu 配置添加其他自定義按鈕。
下面的示例演示如何使用自定義按鈕來(lái)執(zhí)行卡片菜單中的自定義命令。
<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" }
],
cardMenu: [ { 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 card = options.card;
var cardElm = options.cardElement;
var column = options.column;
var columnElm = options.columnElement;
cardElm.css("border", "solid red 3px");
columnElm.css("border", "solid red 3px");
alert(kendo.format("{0} Card executed Custom command in column with status {1} with value {2}", card.get("title"), column.get("status"), options.value));
}
});
</script>
Kendo UI for jQuery是完整的jQuery UI組件庫(kù),可快速構(gòu)建出色的高性能響應(yīng)式Web應(yīng)用程序。Kendo UI for jQuery提供在短時(shí)間內(nèi)構(gòu)建現(xiàn)在Web應(yīng)用程序所需要的一切,從多個(gè)UI組件中選擇,并輕松地將它們組合起來(lái),創(chuàng)建出酷炫響應(yīng)式的應(yīng)用程序,同時(shí)將開發(fā)時(shí)間加快了50%。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)