如何在 DHTMLX 甘特图的资源视图中捕捉点击事件？

如何解决如何在 DHTMLX 甘特图的资源视图中捕捉点击事件？

我正在使用 DHTMLX Gantt Pro 版本制作复杂的甘特图页面。
任务视图底部有资源视图。

我想在那里赶上 click 事件。
我尝试了 onTaskClick 事件。但它仅适用于任务区域。

gantt.attachEvent("onTaskClick",function (id,e) {
  console.log("onTaskClick",id,e);
  return true;
});

如何在资源区捕捉click事件？
请任何人帮忙。

解决方法

您可以使用 gantt.event() 函数捕获事件。 这是适合您的链接。 https://docs.dhtmlx.com/gantt/api__gantt_event.html

首先，您需要为每个元素设置名称。

在模板代码中，您需要返回如下的 html 字符串。

<div name="remove"><img src="some icon" /></div>

然后你喜欢在甘特图渲染时捕获事件。

var elements = [].slice.call(gantt.$container.querySelectorAll("[name='remove']");
elements.forEach(element => {
    gantt.event(element,"click",function(event) {
        // here is your process
    });
});

,

请注意甘特图可以随时重新绘制元素。因此，如果您将事件侦听器附加到单个按钮 - 这些处理程序将在下一次重绘后丢失，此时资源元素将被清除并再次呈现。因此，如果您使用 accepted answer 中建议的方法，则每次由于数据重绘或智能渲染而刷新行的 html 时，您都必须将事件处理程序附加到行。

一个更可靠的选择是在甘特图的顶部元素添加一个“click”事件监听器，然后在处理函数中检查事件目标。如果您检测到事件目标是您的按钮 - 您运行该操作，如果事件目标是某个其他元素 - 您将忽略该事件。

这种方法也称为event delegation。这样您就可以在甘特图内的任何元素上捕获事件，而无需在呈现时将处理程序附加到每个元素。

Html 可以和@KhamNai 回复中的一样：

<div name="remove"><img src="some icon" /></div>

但我建议使用不同的代码：

gantt.event(gantt.$container,function(e){
    var target = e.target;
    // check if the target element is our button:
    if(target.closest("[name='remove']")) { //Element.closest doesn't work in IE,use polifyll if you need it
        // if it's the resource button - do the action
        var row = target.closest("[data-resource-id]");
        var resourceId = row.getAttribute("data-resource-id");
        alert("delete resource " + resourceId);
    }
});

现场示例：https://snippet.dhtmlx.com/5/58a6b1639