如何使用循环 return 我的 DHTMLX 甘特图数据？

Question

我正在使用 DHTMLX Gantt Chart。作为我项目的一部分，我创建了许多自定义层来处理图表，但遗憾的是，这让我的代码变得非常臃肿，不得不将每个任务声明为一个层。我最初的想法是使用循环和对象数组添加任务。当我尝试这种方法时，它不起作用并且没有呈现任何内容。

到目前为止，这是我的代码：

//Gantt Initilisation
document.addEventListener("DOMContentLoaded", function (event) {

    // Specifying the date format
    gantt.config.xml_date = "%Y-%m-%d %H:%i";
    gantt.config.readonly = true;

    // Initializing gantt
    gantt.init("positionsReport");

    // Initiating data loading
    gantt.load("/api/data/get");

    // Initializing dataProcessor
    var dp = new gantt.dataProcessor("/api/");

    //Convert date to a usable format
    gantt.attachEvent("onTaskLoading", function (task) {
    task.options_start = gantt.date.parseDate(task.options_start, "xml_date");
    task.options_end = gantt.date.parseDate(task.options_end, "xml_date");
    task.f2_onhire = gantt.date.parseDate(task.f2_onhire, "xml_date");
    task.f2_offhire = gantt.date.parseDate(task.f2_offhire, "xml_date");
    task.f2_options_start = gantt.date.parseDate(task.f2_options_start, "xml_date");
    task.f2_options_end = gantt.date.parseDate(task.f2_options_end, "xml_date");
    task.f3_onhire = gantt.date.parseDate(task.f3_onhire, "xml_date");
    task.f3_offhire = gantt.date.parseDate(task.f3_offhire, "xml_date");              

    return true;
});

这是使用图层之前的基本设置，我初始化甘特图，将一些日期时间转换为它理解的格式，然后定义我的 API 和所需的数据。

    //Fixture Layers
    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
            }
        ];

为了这个问题的目的，我根据我需要的任务数据创建了一个短数组，它被限制为三个项目。

    for (i = 0; i < fixtureArray.length; i++) {
        var sizes = gantt.getTaskPosition(fixtureArray, fixtureArray.onhire, fixtureArray.offhire);
        var el = document.createElement('div');
        el.className = 'gantt_task_content';            
        return el;          
    }
    return false;       
});

然后我尝试为数组中的每个项目创建所需的图层。

 gantt.config.columns = [
        { name: "text", tree: false, width: 150, resize: true, align: "left", label: "Vessel" },
        { name: "start_date", align: "center", width: 150, resize: true, align: "left", label: "Onhire" },
        { name: "duration", align: "center", width: 70, resize: true, hide: true }
    ];

    //Month format
    gantt.config.scale_unit = "month";
    gantt.config.date_scale = "%M";

    //View
    gantt.config.start_date = new Date(2019, 01, 01);
    gantt.config.end_date = new Date(2020, 01, 01);

    // and attaching it to gantt
    dp.init(gantt);
    // setting the REST mode for dataProcessor
    dp.setTransactionMode("REST");
});

然后我以日期范围、比例和休息模式设置以及最终初始化语句结束。

甘特图工作正常，没有错误消息，但是，它只呈现我的数组循环中的一项，其余的永远不会出现。我的方法是否适合此设置？

Answer 1

一个函数只能有一个 return 值，您的代码会在第一次迭代时退出 addTaskLayer 函数。

如果你想让它显示多个元素，你可以创建一个额外的 'wrapper' 元素，将你的项目附加到它和 return 来自函数的 wrapper 元素：

var wrapper = document.createElement('div'); //!!!


for (i = 0; i < fixtureArray.length; i++) {
    var sizes = gantt.getTaskPosition(fixtureArray, fixtureArray.onhire, fixtureArray.offhire);
    var el = document.createElement('div');
    el.className = 'gantt_task_content';            
    wrapper.appendChild(el); //!!!
}

if(wrapper.children.length){
   return wrapper; //!!!
}

return false;

比如你可以看看这个demo： https://docs.dhtmlx.com/gantt/samples/04_customization/18_subtasks_displaying.html - 检查 Task #2 行，addTaskLayer 函数使用相同的方法添加了多个元素。

如何使用循环 return 我的 DHTMLX 甘特图数据？

How do I return my DHTMLX Gantt data using a loop?

javascript

dhtmlx