Question

我正在使用DHTMLX Gantt Chart。在我的项目中，我创建了许多自定义图层来处理图表，但令人遗憾的是，这使我的代码非常膨胀，不得不将每个任务声明为一个图层。我最初的想法是使用循环和对象数组添加任务。当我尝试这种方法时，它不起作用，什么也没渲染。

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

@GetMapping(value = "/draftReport", produces=MediaType.APPLICATION_JSON_UTF8_VALUE)
public void generateDraftResport(@RequestParam("schoolID") String schoolID, HttpServletResponse response) {
     HttpHeaders headers = new HttpHeaders();
     headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
     response.setHeader("Content-Disposition", "attachment; filename=" + "draft_export.xlsx");
     try {
        InputStream is = exportHandler.draftReport(schoolID);
        org.apache.commons.io.IOUtils.copy(is, response.getOutputStream());
        response.flushBuffer();
        System.out.println("Successfully written");
    }

    catch (IOException ex) {
          log.info("Error writing file to output stream. " + ex);
          System.out.println("Error while writing file");
    }
}

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

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

出于这个问题的目的，我根据所需的任务数据创建了一个简短的数组，该数组仅限于三项。

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

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

甘特图工作正常，没有错误消息，但是，它仅呈现数组循环中的一项，其余项则永远不会出现。对于这种设置，我的方法正确吗？

Answer 1

一个函数只能有一个返回值，您的代码在第一次迭代时会退出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函数使用相同的方法添加了多个元素。

如何使用循环返回DHTMLX Gantt数据？

1 个答案: