dhtmlxGantt.js右键选中任务context-menu-selected甘特图插件二开Demo gantt-charts
dhtmlxGantt.js右键选中任务context menu selected 甘特图组件插件二发Demo gantt-charts
你可以在以下甘特图中测试鼠标右键选中、弹出右键菜单功能
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 在线版
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示例请参考此文章