参考文件
src\views\gj\schedule\scheduleGantt.vue
右键事件onContextMenu响应下拉菜单
gantt.attachEvent("onContextMenu", function (id, linkId, e) {
console.log('---onContextMenu--');
remove_context_menu();///关闭右键菜单/成功调用
if (!id) {
return
}
这里是gantt的定义右键下拉菜单
var custom_menu = `
<div style="position: absolute; display: grid; left: ${e.clientX}px;top: ${e.clientY}px; visibility: visible; z-index: 1000;"
class='custom_menu' >
<input type=button value="任务详细" οnclick="gantt.showLightbox('${id}')">
<input type=button value="删除任务" οnclick="gantt.deleteTask('${id}')">
<input type=button value="Show progress" οnclick="gantt.message(${gantt.getTask(id).progress * 100}+'%')">
<input type=button value="调用方法" οnclick="alert('aaa')">
<input type=button value="调用方法4" οnclick="gantt.makeSubTaskTwo('${id}')">
<input type=button value="调用方法5" οnclick="gantt.makeSubTaskTwo('1234')">
</div>`;
显示右键菜单
// gantt.deleteTask('${id}');
console.log('---onContextMenu--custom_menu=' + custom_menu);
var el = document.createElement("div");
el.innerHTML = custom_menu;
document.body.appendChild(el);
el.style.visibility = "visible";
e.preventDefault();
return true;
});
右键子菜单
<input type=button value="调用方法4" οnclick="gantt.makeSubTaskTwo('${id}')">
导入import {gantt} from "dhtmlx-gantt";
在mount模块中定义调用方法,在gantt名字空间下:
//右键菜单调用响应方法
(function(){
//子进度生成
gantt.makeSubTaskTwo = function(taskid){
console.log("==========makeSubTaskTwo======taskid="+taskid);
alert('=======makeSubTaskTwo======taskid'+taskid);
};
})();