如何在 orgChart2 中添加子节点

Question

如何在 lib orgChart2 中添加子节点 https://github.com/rchockxm/js-orgChart-2

我的代码

Ascedance.FamilyTree = (function() {
  function FamilyTree() {
    var params = {
        .....
    }
    this.pChart = new OrgChartV2(chartParams);
    this.pChart.render();
    $('.add-root-child').click(this.addChild);
  }

  FamilyTree.prototype.addChild = function() {
    var node, nodeChildParams;
    nodeChildParams = {
      options: {
        targetName: "orgchart",
        subTargetName: "orgnode",
        clsName: "org-node"
      },
      customParams: {
        caption: "Frank",
        description: "Demo Child Nodes"
      }
    };
    node = new OrgNodeV2(nodeChildParams);
    return this.pChart.nodes.add.nodes(node);
  };

渲染原木效果很好 我已经通过点击按钮添加另一个节点（方法addChild）

Answer 1

你必须创建根节点。

// Add by click node.
function addNodesByClick(pData, id) {
    if (typeof pData === "object" && pData !== null) {
        var isFind = false;
        
        if (typeof pData.node === "object" && pData.node !== null) {
            if (pData.node.idt1 == id) {
                isFind = true;
            }
            
            if (isFind == true) {
                var nodeNewChildParams = {
                    options: {
                        targetName: "orgchart",
                        subTargetName: "orgnode",
                        clsName: "org-node"
                    },
                    customParams: {
                        caption: lpszDemoData,
                        description: "New Child Nodes"
                    }
                };
                
                var node = new OrgNodeV2(nodeNewChildParams);
                
                pData.addNodes(node);
            }
        }
        
        if (isFind == false) {
            if (typeof pData.nodes === "object" && pData.nodes !== null) {
                for (var i = 0; i < pData.nodes.length; i ++) {
                    addNodesByClick(pData.nodes[i], id);
                }
            }
        }
    }
}

(function() {
    // Create params for chart.
    var chartParams = {
        options: {
            top: 12,
            left: 12,
            line: {
                size: 2,
                color: "#3388dd"
            },
            node: {
                width: 64,
                height: 64,
                maxWidth: 128,
                maxHeight: 128,
                template: "<div id=\"{id}\"><p class=\"node-caption\">{caption}</p><span class=\"node-description\">{description}</span><br /><label>Click to Add</label></div>"
            }
        },
        event: {
            node: {
                onProcess: function(node, nodes) {
                    console.log("node.onProcess");
                },
                onClick: function() {
                    console.log("node.onClick");
                    
                    addNodesByClick(pOrgNodes, this.id);
                    
                    document.getElementById("orgchart").innerHTML = "";
                    
                    // Re-Create OrgChartV2.
                    var pChart = new OrgChartV2(chartParams);
                    
                    // Re-Init.
                    pChart.render();
                },
                onMouseMove: function() {
                    console.log("node.onMouseMove");
                },
                onMouseOver: function() {
                    console.log("node.onMouseOver");
                },
                onMouseOut: function() {
                    console.log("node.onMouseOut");
                }
            },
            onCreate: function() {
                console.log("onCreate");
            },
            onError: null,
            onFinish: function() {
                console.log("onFinish");
            }
        },
        nodes: pOrgNodes
    };
    
    // Create OrgChartV2.
    var pChart = new OrgChartV2(chartParams);
    
    // Init.
    pChart.render();
})();