没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|行业资讯|编辑:龚雪|2022-03-31 10:24:20.820|阅读 165 次
概述:本文主要为大家介绍Kendo UI for jQuery控件的任务板如何以卡片样式显示,欢迎下载最新版控件体验!
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
相关链接:
Kendo UI TaskBoard将任务、笔记、项目或其他类型的项目显示为按列(通道)中特定标准分组的卡片,卡片可以重新排序、放到另一列、编辑或删除。
一张卡片可以处于以下三种状态当中的一个:
您可以禁用/启用单个卡,或列中的所有卡。
以下示例演示了如何禁用特定卡。
<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>
您还可以将只读状态设置为特定卡或列中的所有卡。
以下示例演示如何将列中的所有卡片设置为只读。
<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在每张卡片中呈现一个菜单按钮,提供删除或编辑卡片的选项,单击它们将分别执行 DeleteCardCommand 或 EditCardCommand。
可用的卡片命令有:
可以通过 cardMenu 配置添加其他自定义按钮。
下面的示例演示如何使用自定义按钮来执行卡片菜单中的自定义命令。
<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组件库,可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现在Web应用程序所需要的一切,从多个UI组件中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。
了解最新Kendo UI最新资讯,请关注Telerik中文网!
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
文章转载自:慧都网在大型技术项目中,工具链割裂、协作低效、安全失控是架构师与开发团队的共性痛点。Sparx Systems的Enterprise Architect(Sparx EA)终极版以四大核心技术能力直击这些挑战,成为企业级建模与系统工程的战略级解决方案。本文将深度解析其技术竞争力内核。
在自动化测试过程中,快速识别问题并高效修复错误是确保软件质量的关键。然而,传统的测试方法往往依赖手动检查日志,导致效率低下,甚至遗漏关键问题。TestComplete提供了强大的测试报告与分析功能,帮助团队快速定位错误、优化测试流程,并提升整体开发效率。本文将深入探讨如何利用TestComplete的报告和分析功能,让您的自动化测试更加高效、精准。
关于不同受众的3D PDF工具说明,Tech Soft 3D为两类不同的受众提供多种3D PDF工具:应用开发者和终端用户。 1、开发者工具(例如我们的HOOPS工具包)适用于需要软件开发工具包以创建专业应用程序的用户。 2、终端用户应用包括Theorem、SpinFire等,这些工具允许用户更动态地与三维数据交互。
Java 开发团队常常面临测试覆盖率与开发效率的双重挑战。通过引入 AI 与自动化工具,团队不仅能减轻静态分析与单元测试的负担,还能在保障代码质量的同时提升开发节奏。本文以 Parasoft Jtest 为案例,深入探讨了当前主流的 AI 测试实践如何帮助企业实现代码级测试的优化与落地。
全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。
Kendo UI for jQuery完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。
Kendo UI for Angular完整的Angular UI组件库,助力构建高性能的现代Angular应用。
Kendo UI Support for React支持React Javascript框架,更快地构建更好的应用程序。
Kendo UI for Vue创建响应式Web应用的完整UI组件库。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号