具有相似名称的计划程序任务会覆盖其前一个任务

Question

我的页面中有一个调度程序。它正在从嵌套 API JSON 文件填充数据。它工作得几乎完美，但数据不断被新数据覆盖，例如，如果我创建了一个名为 Modeling 的任务，则不会显示前一个同名任务。我该如何解决这个问题

下面是我的代码，非常感谢任何帮助

HTML

<div id="my_scheduler" style='width:1585px; height:325px;'></div>

javascript

function prepareData(rawData){

 var ganttData = { data: [], links: []};

  for(var i = 0; i < rawData.data.length; i++){
    var task = {}
    gantt.mixin(task, rawData.data[i]);
    gantt.mixin(task, rawData.data[i].task);

    task.text = task.name;
    ganttData.data.push(task);
  }
  return ganttData;
}

 gantt.config.columns = [
    {name: "official_name", align: "left", template: function(data){
     if(data.assign_to) return data.assign_to.official_name;
    }, label: "Assign To", tree:true, width: 200},
    {name: "text", label: "Task", align: "left", hide:true, width: 100},
    {name: "start_date", width: 90},
    {name: "end_date", align: "left", label: "End Date", width: 90},
    {name: "duration", width: 50}
    ];

gantt.config.xml_date = "%Y-%m-%d";
function initializeGantt(content_id) {
    scheduler = gantt.init("my_scheduler", new Date('2017, 01, 01'), new Date('2017, 12, 31'));
    data = localStorage.getItem("id");
    $.get("/dashboard/ganttchart_list/"+data+"/?format=json", function(result) { gantt.parse(prepareData(result)); });

API

    {
        "data": [
            {
                "assign_to": {
                    "id": 3,
                    "employee_id": "28141",
                    "official_name": "Hal Jordan",
                },
                "task": {
                    "id": 1,
                    "name": "Modeling",
                    "description": "3d modeling work"
                },
                "start_date": "2017-06-15",
                "end_date": "2017-06-19"
            },
            {
                "assign_to": {
                    "id": 3,
                    "employee_id": "28144",
                    "official_name": "Kyle Rayner",
                },
                "task": {
                    "id": 8,
                    "name": "Composting",
                    "description": null
                },
                "start_date": "2017-06-01",
                "end_date": "2017-06-08"
            },
            {
                "assign_to": {
                    "id": 2,
                    "employee_id": "28142",
                    "official_name": "John Stewart",
                },
                "task": {
                    "id": 8,
                    "name": "Modelling",
                    "description": null
                },
                "start_date": "2017-06-22",
                "end_date": "2017-06-25"
            }
        ]
    }

Answer 1

很可能你最终在你的数组中有多个具有相同 id 的项目，例如你有两个 "task" 的项目：{ "id":8 , ...}

由于此值用作加载到甘特图中的项目的 ID，您将得到以下信息：

ganttData.data.push({ "id":8, "text":"Composting",...});
ganttData.data.push({ "id":8, "text":"Modelling",...});

虽然 ganttData.data 数组将包含这两个项目，但具有相同 id 属性值的项目将在加载到甘特图中后合并为一个。

如果您希望这些项目单独显示，您需要为它们提供唯一的 ID，并可能将原始 item.task.id 保存到其他属性中，以便能够 link 记录到来自后端的原始任务，例如

function prepareData(rawData){

 var ganttData = { data: [], links: []};

  for(var i = 0; i < rawData.data.length; i++){
    var task = {}
    gantt.mixin(task, rawData.data[i]);
    gantt.mixin(task, rawData.data[i].task);

    task.text = task.name;
    task.taskId = task.id;//!!!important
    task.id = gantt.uid();//!!!important

    ganttData.data.push(task);
  }
  return ganttData;
}

具有相似名称的计划程序任务会覆盖其前一个任务

Scheduler task with similar name override its previous one

html

javascript

dhtmlx