javascript - 如何使用循环返回 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

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

如果您希望它显示多个元素，您可以创建一个额外的“wrapper”元素，将您的项目附加到其中，然后从函数返回 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;     

例如，您可以看一下这个演示: https://docs.dhtmlx.com/gantt/samples/04_customization/18_subtasks_displaying.html - 检查 Task #2 行，有多个元素是通过 addTaskLayer 函数使用相同的方法添加的。