问题描述
我正在使用 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);
}
});