DHTMLX Gantt循环返回数据及自定义图层渲染失效问题

首先来说你遇到的图层渲染问题——你的代码里循环刚执行第一次就直接return了，这就是为什么只显示第一个元素的原因！addTaskLayer的回调函数里，一旦你return el，函数就终止了，后面的循环迭代根本没机会运行。

修复自定义图层的循环渲染 #

你需要创建一个容器元素，把所有生成的任务图层元素都添加到这个容器里，最后再返回这个容器，而不是在循环里直接return单个元素。修改后的代码应该是这样的：

gantt.addTaskLayer(function draw_planned(task) {
    var fixtureArray = [
        { onhire: task.start_date, offhire: task.end_date, charterer: task.current_charterer },
        { onhire: task.f2_onhire, offhire: task.f2_offhire, charterer: task.f2_charterer },
        { onhire: task.f3_onhire, offhire: task.f3_offhire, charterer: task.f3_charterer }
    ];

    // 创建一个容器来装所有图层元素
    var container = document.createElement('div');
    
    for (var i = 0; i < fixtureArray.length; i++) {
        // 注意这里要取数组的第i项，你之前直接用fixtureArray是错的！
        var item = fixtureArray[i];
        // 跳过日期无效的项，避免渲染空图层
        if (!item.onhire || !item.offhire) continue;
        
        var sizes = gantt.getTaskPosition(task, item.onhire, item.offhire);
        var el = document.createElement('div');
        el.className = 'gantt_task_content';
        // 设置元素的位置和样式，不然看不到哦
        el.style.left = sizes.left + 'px';
        el.style.top = sizes.top + 'px';
        el.style.width = sizes.width + 'px';
        el.style.height = sizes.height + 'px';
        // 可以把租家名称显示出来
        el.textContent = item.charterer;
        
        container.appendChild(el);
    }
    
    // 如果容器里有元素就返回，否则返回false不渲染
    return container.children.length ? container : false;
});

这里还有几个你之前忽略的细节：

• 循环里要取fixtureArray[i]，你之前直接用fixtureArray.onhire是访问数组的属性，不是数组项的属性，这会导致getTaskPosition拿到无效日期；
• 必须给生成的元素设置位置样式（left/top/width/height），不然元素会堆在左上角或者完全看不到；
• 加了日期有效性判断，避免处理空的日期值导致的异常。

关于循环返回DHTMLX Gantt数据 #

如果你需要遍历Gantt里的所有任务数据，有几种常用的实现方式：

1. 使用gantt.eachTask遍历所有任务（包括子任务） #

这个方法会递归遍历所有任务，适合处理树形结构的任务数据：

gantt.eachTask(function(task){
    console.log("任务ID：", task.id, "任务名称：", task.text);
    // 这里可以按需处理每个任务的数据，比如收集到自定义数组中
});

2. 获取任务数组后手动循环 #

如果只需要顶层任务，或者想自己控制遍历逻辑，可以用gantt.getTasks()获取所有任务的数组，然后循环处理：

var allTasks = gantt.getTasks();
allTasks.forEach(function(task){
    // 处理单个任务数据
    console.log(task);
});

3. 按索引逐个获取任务 #

如果你知道任务的数量范围，也可以用gantt.getTaskByIndex(index)来逐个获取任务：

var taskCount = gantt.getTaskCount();
for(var i=0; i<taskCount; i++){
    var task = gantt.getTaskByIndex(i);
    console.log(task);
}

这样修改后，你的自定义图层应该就能显示所有数组元素对应的任务条了，遍历任务数据的需求也能满足啦。

内容的提问来源于stack exchange，提问作者Yanayaya