OrgChart - 修改节点并添加子节点 - 使用 jquery答案

【问题标题】：OrgChart - Modifying the nodes and adding children - using jqueryOrgChart - 修改节点并添加子节点 - 使用 jquery
【发布时间】：2019-02-20 10:20:57
【问题描述】：

我在这个问题的参考上问这个问题：LINK

这是来自上述链接的代码：

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) 添加更多数据，如下图所示

这样，在同一个#node-2 中，
1.洪淼
2.部门经理
3.ABC（示例文字）

编辑：我已经看过以下链接，他们不共享代码：
1.Add customized node in OrgChart using orgchart.js
2。 https://github.com/dabeng/OrgChart
但无法得到我的答案。请告诉我，代码，如何在节点本身内添加级别，如上图和紧随其后列出的文本中所述。

【问题讨论】：

最有可能通过更改nodeTemplate github.com/dabeng/OrgChart
stackoverflow.com/questions/46962530/…
Add customized node in OrgChart using orgchart.js的可能重复
@freedomn-m 标记的副本既没有解决我在这里提出的问题，也没有分享代码。立即查看已编辑的问题。
在 chrome 中，右键单击要查看的元素并选择检查。找到“样式”面板并查找 .content - 它会显示源代码，在本例中是 jquery.orgchart.min.css - 它已作为外部 css 资源添加到笔中。

标签： jquery orgchart

【解决方案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'
});

【讨论】：