OrgChart - изменение узлов и добавление дочерних элементов - с помощью jquery

Question

Я задаю этот вопрос по ссылке этого вопроса: ССЫЛКА

Вот код по вышеуказанной ссылке:

var datascource = {
      'id': 1,
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'id':2,'name': 'Bo Miao', 'title': 'department manager' },
        { 'id':3,'name': 'Su Miao', 'title': 'department manager'},
        { 'id':4,'name': 'Hong Miao', 'title': 'department manager' },
        { 'id':5,'name': 'Chun Miao', 'title': 'department manager' }
      ]
    };

    $('#chart-container').orgchart({
      'visibleLevel': 2,
      'pan': true,
      'data' : datascource,
      'nodeContent': 'title',
      'nodeId':'id',
      'createNode': function($node, data) {
        $node.on('click', function(event) {
          $('#chart-container').orgchart('addChildren', $node,
            {'id' : 7,  'name': 'Hong ', 'title': 'Test manager' }
          );
        });
      }
    });

скажите, пожалуйста, как мне добавить дополнительные данные к узлу (# node-2), как показано на следующем рисунке

Так что в том же # узле-2 будет
1.Hong Miao
2.Департамент отдела
3.ABC (пример текста)

РЕДАКТИРОВАТЬ: Я уже видел следующие ссылки, они не разделяют код:
1. Добавить настроенный узел в OrgChart, используя orgchart.js
2.https://github.com/dabeng/OrgChart
Но не смог получить мой ответ.Скажите, пожалуйста, код, как добавить уровни в самом узле, как описано выше на рисунке и в следующем тексте.

Answer 1

Вы можете добавить новое свойство в источник данных и реализовать nodeTemplate:

var datascource = {
'id': 1,
'name': 'Lao Lao',
'title': 'general manager',
'office': '',
'children': [
{ 'id':2,'name': 'Bo Miao', 'title': 'department manager','office': ''},
{ 'id':3,'name': 'Su Miao', 'title': 'department manager','office': ''},
{ 'id':4,'name': 'Hong Miao', 'title': 'department manager','office': 'Data'},
{ 'id':5,'name': 'Chun Miao', 'title': 'department manager''office': ''}
]
};
var nodeTemplate = function(data) {
return `
<div class="title">${data.name}</div>
<div class="content">${data.title}</div>
<div class="content office">${data.office}</div>
`;
};
$('#chart-container').orgchart({
'visibleLevel': 2,
'pan': true,
'data' : datascource,
'nodeContent': 'title',
'nodeTemplate': nodeTemplate,
'nodeId':'id'
});

Дополнительная информация:

https://rawgit.com/dabeng/OrgChart/master/demo/custom-template.html