dhtmlxGantt.js右键选中任务context-menu-selected甘特图插件二开Demo gantt-charts

dhtmlxGantt.js右键选中任务context menu selected 甘特图组件插件二发Demo gantt-charts

https://github.com/DHTMLX/gantt
demo 功能点:
  • js实现甘特图鼠标的右键选中计划、任务、右键菜单
  • dhtmlxGantt.js 在甘特图任务上右键选择任务+高亮,可参考本demo实现
  • dhtmlxGantt.js二次开发修改 onContextMenu event 鼠标右键菜单事件
  • dhtmlxGantt.js add context menu dialog
  • dhtmlxGantt.js online demo gantt-charts 网页版
  • dhtmlx Gantt.js 二开定制修改 功能拓展 入门教程 案例
  • dhtmlxGantt.js demo 源码下载 csdn
  • 网页版 项目计划、任务图表:甘特图
  • 开源甘特图 js 插件 demo 在线版
demo 完整的源代码
cdn集成
https://gcore.jsdelivr.net/npm/dhtmlx-gantt@7.1.12/codebase/dhtmlxgantt.js
https://gcore.jsdelivr.net/npm/dhtmlx-gantt@7.1.12/codebase/dhtmlxgantt.css

demo 源码下载

实现原理:把右键所在行的 dom 点击一下,通过js调用 div.click() 模拟用户点击,于是就实现了选择本行

// dhtmlxGantt.js 甘特图插件 实现右键选中鼠标所在行的任务、项目的代码
gantt.attachEvent("onContextMenu", function (taskId, linkId, event) {
	console.log('onContextMenu');
	console.log(taskId, linkId, event);

	// 实现右键选中
	let list = Array.from(document.querySelectorAll('.gantt_row'))
	list.forEach(row => {
		// 选中右键对应的所在的行(也就是对应的任务、项目)
		if (row.dataset.taskId === taskId) row.click()
	})
})
除了甘特图的右键代码,更详细的dhtmlxGantt.js Demo示例请参考此文章