十六、 Dhtmlxgantt右键菜单与方法调用

参考文件

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="任务详细" onclick="gantt.showLightbox('${id}')">

      <input type=button value="删除任务" onclick="gantt.deleteTask('${id}')">

<input type=button value="Show progress" onclick="gantt.message(${gantt.getTask(id).progress * 100}+'%')">

      <input type=button value="调用方法" onclick="alert('aaa')">

      <input type=button value="调用方法4" onclick="gantt.makeSubTaskTwo('${id}')">

      <input type=button value="调用方法5" onclick="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" onclick="gantt.makeSubTaskTwo('${id}')">

导入import {gantt} from "dhtmlx-gantt";

在mount模块中定义调用方法，在gantt名字空间下：

      //右键菜单调用响应方法

  (function(){

    //子进度生成

    gantt.makeSubTaskTwo = function(taskid){

      console.log("==========makeSubTaskTwo======taskid="+taskid);

      alert('=======makeSubTaskTwo======taskid'+taskid);

    };

  })();