DHTMLX 甘特图将同一任务连续展开折叠问题

Question

我正在使用甘特图，其中的数据格式如下

A 
   A1 1/4/2016
   A1 2/4/2016
   A2 4/4/2016
B
   B1 4/4/2016
   B2 5/4/2016

我想将相同的任务分组显示在一行中

我已经做到了，但是当我展开多个类别时，图表数据无法正确显示

正如你所见，Audi05 应该在下面显示一行。

这是我的自定义代码：

/* Custom Code */
gantt.getGlobalTaskIndex = function (id) {
    dhtmlx.assert(id, "Invalid argument");
    if (index_list.length!=0 && _.where(index_list,{id:id}).length > 0){
        return _.where(index_list,{id:id})[0].pos;
    }

    var ord = this._order;
    for(var i= 0, count = ord.length; i < count; i++)
        if(ord[i] == id) 
       return i;

    return -1;
};
/* End */




gantt._render_grid_item = function (item) {
if (!gantt._is_grid_visible())
    return null;
/* Issue in the Custom Code */
    var index = index_list.length;
    if(item.vehicle_id)
    {
        var isExist=task_list.some(function (el) {
            var res=(el.id===item.vehicle_id);
                return res;
                        });
            if(!isExist){
                task_list.push({'id':item.vehicle_id});
            }
            else{
                return null;
            }
    }
/* End */
var columns = this.getGridColumns();
var cells = [];
var width = 0;
for (var i = 0; i < columns.length; i++) {
    var last = i == columns.length - 1;
    var col = columns[i];
    var cell;

    var value;
    if (col.name == "add") {
        value = "<div class='gantt_add'></div>";
    } else {
        if (col.template)
            value = col.template(item);
        else
            value = item[col.name];

        if (value instanceof Date)
            value = this.templates.date_grid(value, item);
        value = "<div class='gantt_tree_content'>" + value + "</div>";
    }
    var css = "gantt_cell" + (last ? " gantt_last_cell" : "");

    var tree = "";
    if (col.tree) {
        for (var j = 0; j < item.$level; j++)
            tree += this.templates.grid_indent(item);

        var has_child = this._has_children(item.id);
        if (has_child) {
            tree += this.templates.grid_open(item);
            tree += this.templates.grid_folder(item);
        } else {
            tree += this.templates.grid_blank(item);
            tree += this.templates.grid_file(item);
        }
    }
    var style = "width:" + (col.width - (last ? 1 : 0)) + "px;";
    if (dhtmlx.defined(col.align))
        style += "text-align:" + col.align + ";";
    cell = "<div class='" + css + "' style='" + style + "'>" + tree + value + "</div>";
    cells.push(cell);
}
var css = item.$index % 2 === 0 ? "" : " odd";
css += (item.$transparent) ? " gantt_transparent" : "";

css += (item.$dataprocessor_class ? " " + item.$dataprocessor_class : "");

if (this.templates.grid_row_class) {
    var css_template = this.templates.grid_row_class.call(this, item.start_date, item.end_date, item);
    if (css_template)
        css += " " + css_template;
}

if (this.getState().selected_task == item.id) {
    css += " gantt_selected";
}
var el = document.createElement("div");
el.className = "gantt_row" + css;
el.style.height = this.config.row_height + "px";
el.style.lineHeight = (gantt.config.row_height) + "px";
el.setAttribute(this.config.task_attribute, item.id);
el.innerHTML = cells.join("");
return el;
};
gantt.open = function (id) {
    task_list=[];
    gantt._set_item_state(id, true);
    this.callEvent("onTaskOpened", [id]);
};

gantt.close = function (id) {
    task_list=[];
    gantt._set_item_state(id, false);
    this.callEvent("onTaskClosed", [id]);
};



    gantt._get_task_coord = function(task, to_start, x_correction){
to_start = to_start !== false;
x_correction = x_correction || 0;
var isMilestone = (this._get_safe_type(task.type) == this.config.types.milestone);

var date = null;

if(to_start || isMilestone){
    date = (task.start_date || this._default_task_date(task));
}else{
    date = (task.end_date || this.calculateEndDate(this._default_task_date(task)));
}
var x = this.posFromDate(date),
    //y = this.getTaskTop(task.id);
    /* Custom code */   
    y = this.getTaskTop(task);

   if(task.vehicle_id)
    {
        var isExist=vehicle_list.some(function (el) {
        var res=(el.id===task.vehicle_id);
            return res;
                    });
        if(!isExist){
            vehicle_list.push({'id':task.vehicle_id,'y':y});
        }
        else{
        y = _.where(vehicle_list, {id:task.vehicle_id})[0].y;
        }
    }

/* End */

if(isMilestone){
    if(to_start){
        x -= x_correction;
    }else{
        x += x_correction;
    }
}
return {x:x, y:y};
};



      gantt.getTaskPosition = function(task, start_date, end_date){
var x = this.posFromDate(start_date || task.start_date);
var x2 = this.posFromDate(end_date || task.end_date);
x2 = Math.max(x, x2);
//var y = this.getTaskTop(task.id);
var y = this.getTaskTop(task); // Custom code
var height = this.config.task_height;
return {
    left:x,
    top:y,
    height : height,
    width: Math.max((x2 - x), 0)
};
};

Answer 1

请使用类似的显示任务和子任务的方式检查示例： http://docs.dhtmlx.com/gantt/samples/04_customization/18_subtasks_displaying.html

DHTMLX 甘特图将同一任务连续展开折叠问题

DHTMLX Gantt chart group same task in a row expand collapse issue

grouping

collapse

expand

dhtmlx

gantt-chart