Как обновить / обновить дату начала в диаграмме Ганта dhtmlx для всех задач с разным значением даты

#javascript #dhtmlx

Вопрос:

Я использую dhtmlx диаграмму Ганта, я обновляю «начальную дату» для всех задач с одинаковым значением даты. Но мне нужно обновить другое значение, используя массив объектов newjson в коде. При нажатии на каждую задачу дата будет обновлена.Вот приведенный ниже код. Часть Javascript должна быть ниже тега body

HTML

 <!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>
  <script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>
  <style>
    .gantt_custom_button {
      background-color: rgb(206, 206, 206);
      position: absolute;
      right: -10px;
      top: 5px;
      width: 20px;
      height: 26px;
      border-radius: 0;
    }
  </style>


</head>
<div id='gantt_here' style='width:100%; height:500px;'></div>

<body>
  <script>
    var task1 = {
      'data': [{
          'id': 1,
          'text': 'Project #1',
          'start_date': '01-04-2019',
          'duration': 2,
          'order': 10,
          'progress': 0.4,
          'open': true
        },
        {
          'id': 2,
          'text': 'Task #1',
          'start_date': '02-04-2019',
          'duration': 1,
          'order': 10,
          'progress': 0.6,
          'parent': 1
        },
        {
          'id': 3,
          'text': 'Task #2',
          'start_date': '03-04-2019',
          'duration': 2,
          'order': 20,
          'progress': 0.6,
          'parent': 1
        },
        {
          'id': 4,
          'text': 'Task #3',
          'start_date': '02-04-2019',
          'duration': 1,
          'order': 10,
          'progress': 0.6,
          'parent': 1
        }

      ],
      'links': [{
          'id': 1,
          'source': 1,
          'target': 2,
          'type': '1'
        },
        {
          'id': 2,
          'source': 2,
          'target': 3,
          'type': '0'
        },
        {
          'id': 3,
          'source': 3,
          'target': 4,
          'type': '0'
        },
        {
          'id': 4,
          'source': 2,
          'target': 5,
          'type': '2'
        }
      ]
    };
    const CellDisplay = item => {
      switch (item) {
        case 'item1':
          return 'one';
        case 'item2':
          return 'two';
        case 'item3':
          return 'three';
        case 'item4':
          return 'four';
        case 'item5':
          return 'five';
      }
    };
    const forLaunch = lData => {
      const scale = {
        unit: 'day',
        step: 1,
        format: date => {
          for (const key in lData) {
            console.log(key);
            return CellDisplay(key);
          }
        }
      };
      return scale;
    };
    gantt.config['scales'] = [{
      unit: 'day',
      step: 1,
      format: '%d %M'
    }];
    const Obj = [{
      Id: 575,
      items: {
        item1: '2020-12-08T10:00:00.000 0000',
        item2: '2020-11-12T00:00:00.000 0000',
        item3: '2020-12-08T10:00:00.000 0000',
        item4: null,
        item5: '2020-12-08T10:00:00.000 0000'
      },
      active: false
    }];
    Obj.forEach(data => {
      gantt.config['scales'].unshift(forLaunch(data.items));
    });
    gantt.init('gantt_here');
    gantt.parse(task1);
  </script>

</html>

Ответ №1:

Не рекомендуется обновлять данные задачи в шаблоне. Если вы хотите обновить задачу после нажатия на нее, лучше использовать обработчик onTaskClick событий:

https://docs.dhtmlx.com/gantt/api__gantt_ontaskclick_event.html

Вы можете использовать eachTask метод, в котором вы можете указать родительский идентификатор в качестве второго параметра. Затем Gantt выполнит итерацию всех дочерних элементов указанной задачи:

https://docs.dhtmlx.com/gantt/api__gantt_eachtask.html

batchUpdate Функция попросит Ганта перерисовать изменения только один раз:

https://docs.dhtmlx.com/gantt/api__gantt_batchupdate.html

Кроме того, вам необходимо обновить параметр подзадачи end_date , иначе он duration изменится:

https://docs.dhtmlx.com/gantt/api__gantt_calculateenddate.html

Вот фрагмент:

http://snippet.dhtmlx.com/5/0871f77f5