dhtmlx gantt如何筛选出重叠的任务,且使任务的重叠部分透明
时间: 2023-08-11 15:38:40 浏览: 157
dhtmlxGantt.doc
要筛选出重叠的任务,并使任务的重叠部分透明,你可以使用 dhtmlx gantt 中的 gantt.getTaskByTime 函数和 gantt.addTaskLayer 函数。
首先,你可以使用 gantt.getTaskByTime 函数来获取与指定任务时间段重叠的所有任务。然后,你可以使用 gantt.addTaskLayer 函数为任务添加一个图层,在该图层中绘制任务的重叠部分。
下面是一个示例代码:
```javascript
// 添加一个图层
gantt.addTaskLayer(function drawOverlapping(task, container) {
// 获取与指定任务时间段重叠的所有任务
var overlaps = gantt.getTaskByTime(task.start_date, task.end_date);
// 遍历重叠的任务,为其添加一个特殊的 CSS 类
overlaps.forEach(function(overlap) {
if (overlap.id != task.id) {
container.querySelector(".gantt_task_line").classList.add("gantt_task_overlapping");
}
});
return true;
});
// 定义一个 CSS 类,用于表示任务的重叠部分
.gantt_task_overlapping {
background-color: rgba(255, 0, 0, 0.2);
}
```
以上代码中,我们首先使用 gantt.addTaskLayer 函数为任务添加一个图层,然后在该图层中使用 gantt.getTaskByTime 函数获取与指定任务时间段重叠的所有任务。接着,我们遍历重叠的任务,为其添加一个特殊的 CSS 类 "gantt_task_overlapping",从而使其在重叠部分透明。
注意,以上示例代码仅供参考,具体实现方式可能需要根据你的实际需求进行调整。同时,由于需要通过 JavaScript 动态地为任务设置样式,因此在性能方面可能会有些影响,你需要根据实际情况进行优化。
阅读全文