Dhtmlx Gantt-Diagramm Gruppe gleiche Aufgabe in einer Reihe erweitert Zusammenbruch Ausgabe

Question

ich Gantt-Diagramm, in dem mich mit dem Datum in folgendem Format sein wird

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

ich gruppieren mag die gleichen Aufgaben in einzelnen Zeilen angezeigt werden

ich habe dies erreicht, aber wenn ich mehrere Kategorien die Diagrammdaten erweitern zeigen nicht richtig

Wie Sie sehen können, sollte Audi05 eine Zeile darunter anzeigen.

Hier ist mein angepasste Code:

/* 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

Bitte überprüfen Sie die Probe mit einer ähnlichen Art und Weise Aufgaben und Teilaufgaben der Anzeige: http://docs.dhtmlx.com/gantt/samples/04_customization/18_subtasks_displaying.html