「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中(一)

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。

DHTMLX Gantt是一个高度可定制的工具,可以与项目管理应用程序所需的其他功能相补充。在本文中您将学习如何使用自定义上下文菜单来补充基于DHTMLX的JavaScript甘特图,来提高用户在任务管理中的效率。考虑到DHTMLX产品的良好互兼容性,DHTMLX Suite的Menu小部件是实现本教程目标的甘特图组件的完美补充。

DHTMLX Gantt最新正式版下载

让我们更详细地介绍一下这个演示,并为您提供技术细节,将类似的功能集成到项目中。

初始化和配置上下文菜单

在用例场景中,上下文菜单是一个有用的UI元素,它可以根据用户与甘特图交互的上下文显示不同的选项。

如果您右键单击下面示例中甘特图的任何任务,可以尝试所有可用的任务操作。

「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中

为了节省时间,我们将省略明确描述甘特图组件的初始化阶段,直接使用DHTMLX Menu实现上下文菜单。

第一步是创建上下文菜单的新实例。

let contextMenu = new dhx.ContextMenu(null, { css: "dhx_widget--bg_gray" });

之后使用onContextMenu事件处理程序,该处理程序在右键单击任务后触发。

gantt.attachEvent("onContextMenu", function (taskId, linkId, event) {

在菜单配置中,根据单击位置显示不同的菜单项。在时间轴中调用常规任务的上下文菜单时,它将包含“拆分任务”项。但是在项目类型任务的上下文菜单中以及在网格区域调用任务菜单时,此选项不可用,因为假设任务应该在单击位置进行拆分。

「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中

在事件处理程序中函数的最开始,有必要收集上下文菜单调用的确切位置的信息。

let itemsConfig = null;
if (taskId) {
const task = gantt.getTask(taskId);

为此,您需要几个配置(变量):

  • isTaskBar – 显示时间轴中的任务栏(此处不考虑任务类型)是否被单击。
const isTaskBar = event.target.closest(".gantt_task_line");
  • isParentTask – 显示任务是否有子任务。
const isParentTask = gantt.hasChild(task.id);
  • isSplitTask – 当任务的所有子任务(任务栏)显示在时间轴的单行上时,显示任务是否以拆分模式呈现。
const isSplitTask = task.render === "split";
  • barHidden – 显示任务是否显示在时间轴中。
const barHidden = task.hide_bar;

如果任务有父任务,则需要确定其父任务是否显示在分裂模式中。它是这样做的:

let hasSplitParent = false;
if (task.parent) {
const parent = gantt.getTask(task.parent);
hasSplitParent = parent.render === "split";
}

之后,您需要将所有参数添加到itemsConfig对象。

itemsConfig = { isTaskBar, isParentTask, isSplitTask, barHidden, hasSplitParent };

对于自定义上下文菜单,您需要删除所有以前的上下文菜单项,然后添加由generateMenuItems函数返回的新项。

contextMenu.data.removeAll();
contextMenu.data.parse(generateMenuItems(itemsConfig));

现在是时候在单击位置显示上下文菜单了。

contextMenu.showAt(event);

接下来,您需要计算鼠标点击相对于时间轴的位置。从得到的单击位置,您将获得单击日期,它应该被添加到clickDate参数中,它将用于各种上下文菜单操作。

const clickPosition = gantt.utils.dom.getRelativeEventPosition(event, gantt.$task_data).x;
clickDate = gantt.dateFromPos(clickPosition)

onContextMenu事件处理程序的函数必须返回false以禁用默认的上下文菜单功能(即浏览器不应该显示默认的上下文菜单)。

现在让我们返回到generateMenuItems函数,在这个函数中,生成上下文菜单项的数据。上下文菜单项的每个对象都包含一个图标、项类型、ID和文本。

{
icon: "dxi dxi-chevron-up",
type: "menuItem",
id: "add_sibling_above",
value: "Add sibling above",
},

接下来,您需要为“取消复制/剪切操作”和“显示所有隐藏任务”两个菜单项创建对象。

const cancelCopyCut = {
icon: "dxi dxi-close",
type: "menuItem",
id: "cancel_paste",
value: "Cancel copy/cut operation",
};
const showAllHidden = {
icon: "dxi dxi-eye",
type: "menuItem",
id: "show_hidden",
value: "Show all hidden tasks",
};

在网格或时间轴上单击任务栏后,将使用配置调用该函数,并将各种元素添加到上下文菜单中。

当在甘特图的其他区域发生单击时,需要检查是否选择了用于复制和剪切的任务。如果是,则将此对象添加到菜单项数组中。如果隐藏了某些任务,则会添加第二个菜单项。在上述条件下,无论单击甘特图中的位置如何,这些菜单项将始终可见。

const menuItems = [];
if (tasksToCopy.length + tasksToCut.length > 1) {
menuItems.push(cancelCopyCut);
}
if (Object.keys(hiddenTasks).length) {
menuItems.push(showAllHidden);
}
return menuItems;

现在回到上下文菜单配置,在创建上下文菜单的实例之前,考虑使用generateMenuItems函数是合理的,以免以后再回到这个问题上。

您必须为单击上下文菜单项添加事件处理程序。对于每次单击,将调用单击函数,这个函数将使用菜单项的ID。

contextMenu.events.on("click", function (id, e) {
applyCommand(id);
targetId = null;
});

现在我们可以分别关注每个上下文菜单选项的配置。

篇幅有限未完待续,更多内容敬请期待.......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/27022.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Numpy】一文向您详细介绍 np.sqrt()

【Numpy】一文向您详细介绍 np.sqrt() 下滑即可查看博客内容 🌈 欢迎莅临我的个人主页 👈这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地!🎇 🎓 博主简介:985高校的普通本硕,曾…

vsto excel 快速查找所有标黄的格子

在 VSTO (Visual Studio Tools for Office) 加载项中,你可以使用 C# 代码快速查找并处理 Excel 工作表中所有被标记为黄色的单元格。以下是一个示例代码,展示如何遍历工作表并查找所有背景颜色为黄色的单元格。 ### 示例代码 using System; using Syst…

辽宁省实验中学2024暑假信息学体验活动测试试卷解析

辽宁省实验中学2024暑假信息学体验活动测试试卷解析 一、客观题测试一:选择题(每个题5分,不定选项)1. 在 C++程序中,下列标识符都是合法的是() A. _key,3ab,dc B. _ba1,in,ac C. int,3c,bc 2. 下方代码输入 3 4,输出是:( ) #include<iostream> using namespace …

AI日报|Luma推出AI视频模型,又一Sora级选手登场?SD3 Medium发布,图中文效果改善明显

文章推荐 AI日报&#xff5c;仅三个月就下架&#xff1f;微软GPT Builder出局AI竞争赛&#xff1b;马斯克将撤回对奥特曼的诉讼 谁是最会写作文的AI“考生”&#xff1f;“阅卷老师”ChatGPT直呼惊艳&#xff01; ⭐️搜索“可信AI进展“关注公众号&#xff0c;获取当日最新…

输出数据到excel中

% 定义数据 names1 {ff, jj, aa, bb}; % Example name1 data names2 {tt, yy, cc, dd}; % Example name2 data corrfits [2, 4, 6, 8]; % Example corrfit data % 获取数据的长度 n length(names1); % 初始化一个单元数组来存储所有数据 data cell(n, 3); % 使用循环…

Flink 命令行提交、展示和取消作业

在Flink中&#xff0c;可以通过命令行提交、展示和取消作业。以下是如何使用命令行操作Flink作业的示例&#xff1a; 提交作业 ./flink run -c com.example.MainClass /path/to/your/job.jar [jobArgs]这里&#xff0c;run是提交作业的命令&#xff0c;-c后面跟着的是主类的全…

深入理解MyBatis XML配置文件

MyBatis是一款优秀的持久层框架&#xff0c;简化了数据库操作的复杂性&#xff0c;提高了开发效率。在MyBatis中&#xff0c;XML配置文件扮演了重要角色&#xff0c;用于配置数据源、事务管理、SQL映射等内容。本文将详细介绍MyBatis的XML配置文件&#xff0c;帮助读者更好地理…

Three.js的渲染器:WebGLRenderer、CSS3DRenderer、SVGRenderer

我们都晓得渲染器是负责将场景中的3D对象转换为2D图像&#xff0c;然后显示在屏幕上&#xff0c;three.js内置了多种渲染器&#xff0c;来应对不同的和需求&#xff0c;贝格前端工场老司机&#xff0c;简要和大家分享下。 一、渲染器的定义和作用 在Three.js中&#xff0c;渲…

凯伦股份中标中铁置业2024-2026年度防水材料框架协议采购项目!

近日&#xff0c;凯伦股份收到了中铁置业集团有限公司发来的中标通知书&#xff0c;确定凯伦公司为其2024年度-2026年度防水材料框架协议采购项目的中标人&#xff0c;正式成为中铁置业集团的合作供应商。 中铁置业集团有限公司是中国中铁股份有限公司的全资子公司&#xff0c;…

【postman接口测试工具的安装和使用】

Postman是一个强大的接口测试和开发工具&#xff0c;支持HTTP协议的所有请求方式&#xff0c;如GET、POST、PUT、DELETE等&#xff0c;并允许用户模拟各种HTTP请求[1][2]。以下是关于Postman的安装和使用方法的详细介绍&#xff1a; 安装Postman 访问官方网站&#xff1a; 打开…

关键的服务器硬件组件及其基本功能

以下是一些关键的服务器硬件组件及其基本功能&#xff1a; 中央处理器&#xff08;CPU&#xff09;&#xff1a; 功能&#xff1a;执行计算和处理任务&#xff0c;是服务器的核心处理单元。特点&#xff1a;通常服务器使用多核、多线程的高性能CPU&#xff0c;以处理并行任务和…

Kafka跨集群数据镜像解决方案MirrorMaker及其替代工具

摘要&#xff1a; 本文介绍了Apache Kafka社区提供的跨集群数据镜像工具MirrorMaker&#xff0c;分析了其优缺点&#xff0c;并简要介绍了LinkedIn和Confluent公司针对MirrorMaker的不足所开发的替代工具。 一、MirrorMaker简介 MirrorMaker是Apache Kafka社区推出的一款跨集…

Llama3-8B到底能不能打?实测对比

前几天Meta开源发布了新的Llama大语言模型&#xff1a;Llama-3系列&#xff0c;本次一共发布了两个版本&#xff1a;Llama-3-8B和Llama-3-70B&#xff0c;根据Meta发布的测评报告&#xff0c;Llama-3-8B的性能吊打之前的Llama-2-70B&#xff0c;也就是说80亿参数的模型干掉了70…

GNU/Linux - 使用字符设备来操作GPIO

从 4.8 版开始&#xff0c;Linux 内核引入了基于字符设备的新用户空间 API&#xff0c;用于管理和控制 GPIO&#xff08;通用输入/输出&#xff09;。这篇文章介绍了新接口的基本原理&#xff0c;并通过一个简单的教程/示例演示了如何使用新 API 控制 GPIO。 教程中使用的硬件是…

一篇文章教你学会如何用云服务器搭建https网站

首先我们要明白为什么要通过云服务器来搭建https网站&#xff0c;这是因为通过使用云服务器搭建 HTTPS 网站&#xff0c;可以为我们提供更高的安全性和信任度。 一&#xff0c;前期的准备工作分为三大类&#xff1a;一台云服务器&#xff0c;域名&#xff0c;SSL证书&#xff1…

ESP8266发送WOL幻数据包实现电脑远程唤醒

计算机远程唤醒&#xff08;Wake-on-LAN, WOL&#xff09; 计算机远程唤醒&#xff08;Wake-on-LAN&#xff0c;简称 WOL&#xff09;是一种局域网唤醒技术&#xff0c;可以将局域网内处于关机或休眠状态的计算机唤醒至引导&#xff08;Boot Loader&#xff09;或运行状态。无…

RAG 实践-Ollama+AnythingLLM 搭建本地知识库

什么是 RAG RAG&#xff0c;即检索增强生成&#xff08;Retrieval-Augmented Generation&#xff09;&#xff0c;是一种先进的自然语言处理技术架构&#xff0c;它旨在克服传统大型语言模型&#xff08;LLMs&#xff09;在处理开放域问题时的信息容量限制和时效性不足。RAG的…

pg——psql命令行交互式客户端工具

1、启动数据库 ./pg_ctl -D /usr/local/pgsql/data/ -l /usr/local/pgsql/log 2、登录数据库 psql template1 3、查看所有数据库 \l 4、创建数据库 create database testdb; 5、连接某数据库 \c 数据库 6、查看数据下的表 \d 7、 查看数据库下的所有schema \dn 8、查看表的结构…

BSV及BTC减半来袭,Teranode如何确保节点未来依然有足够的收入

​​发表时间&#xff1a;2024年4月12日 随着BTC第四次区块奖励减半的完成&#xff0c;加密资产行业正处于某种程度的狂热之中。这使得与扩容以及经济可持续性相关的讨论日益增加。 BTC价格的波动性强是众所周知的&#xff0c;经常几分钟内价格突然飙升或急速下跌&#xff0c;…

wmv转换mp4怎么操作?3个格式转换方法分享

wmv转换mp4怎么操作&#xff1f;将WMV转换为MP4格式&#xff0c;可以方便我们在多种设备和平台上流畅播放视频。MP4格式具有广泛的兼容性和优化过的编码&#xff0c;使其在各种媒体播放器、智能手机、平板电脑以及电视上都能得到良好的支持。此外&#xff0c;MP4格式的视频文件…