Как мне вернуть данные DHTMLX Gantt, используя цикл? - PullRequest
Новая
       10

Как мне вернуть данные DHTMLX Gantt, используя цикл?

0 голосов
/ 29 апреля 2019

Я использую DHTMLX Диаграмма Ганта .Как часть моего проекта, я создаю множество пользовательских слоев для работы с диаграммой, но, к сожалению, это делает мой код очень раздутым, так как нужно объявлять каждую задачу как слой.Моей первоначальной мыслью было добавить задачи, используя цикл и массив объектов.Когда я попробовал этот подход, он не работал, и ничего не отображалось.

Вот мой код: 

//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");
});

Затем я заканчиваю сдиапазон дат, настройки масштаба и режима покоя, а также окончательный оператор инициализации.

Диаграмма Ганта работает нормально, сообщений об ошибках нет, но она отображает только один элемент из моего цикла массива, остальные не отображаются.Правильный ли мой подход для этой настройки?

1 Ответ

1 голос
/ 29 апреля 2019

Вы можете иметь только одно возвращаемое значение из функции, ваш код выходит из функции addTaskLayer на первой итерации.

Если вы хотите, чтобы он отображал несколько элементов, вы можете создать дополнительный элемент «обертка», добавить к нему ваши элементы и вернуть элемент 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 - отметьте Строка задачи №2 , есть несколько элементов, добавленных функцией addTaskLayer с использованием того же подхода.

...