Hinzufügen neuer Knoten dynamisch auf GetOrgChart

Question

Gibt es eine Methode zum Hinzufügen neuer Knoten mit Ajax? Ich möchte, dass, wenn ich auf einen Knoten klicke, eine Ajax-Anfrage gesendet wird, um Informationen in der Datenbank aufzunehmen und Kinder für diesen Knoten zu erstellen. Ich versuchte mit insertNode und inserNodeEvent, aber nur ein Knoten wird erstellt, auch wenn Datenbank viele senden.

Dank

Answer 1

Bitte den Code-Schnipsel unten laufen. Die nächste Version wird Batch InsertNode Methode

var source = [ 
 
    { id: 1, parentId: null, Name: "Amber McKenzie"}, 
 
    { id: 2, parentId: 1, Name: "Ava Field"}, 
 
    { id: 3, parentId: 1, Name: "Evie Johnson"}]; 
 

 
var orgchart = new getOrgChart(document.getElementById("people"),{ \t \t \t 
 
    enableSearch: false, 
 
    dataSource: source 
 
}); 
 

 

 
document.getElementById("insertNodes").addEventListener("click", function(){ 
 
    source = [ 
 
    { id: 1, parentId: null, Name: "Amber McKenzie"}, 
 
    { id: 2, parentId: 1, Name: "Ava Field"}, 
 
    { id: 4, parentId: 1, Name: "New node Id 4"}, 
 
    { id: 3, parentId: 1, Name: "Evie Johnson"}, 
 
    { id: 5, parentId: 3, Name: "New node Id 5"}]; 
 
    
 
    orgchart.config.dataSource = source; 
 
    
 
    orgchart.load(); 
 
});

<link rel="stylesheet" type="text/css" href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css"> 
 
<script type="text/javascript" src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script> 
 
<input id="insertNodes" type="button" value="insert nodes" /> 
 

 
<div id="people"></div>

Answer 2

Vielen Dank für Ihre Antwort unterstützen, ich habe ein anderes Problem. Ich kann der Quelle keine neuen Daten hinzufügen, und die Ajax-Anforderung sendet nur den Namen

var source = [ { id: 1, parentId: null, Name: "Amber McKenzie 1"}, 
{ id: 2, parentId: 1, Name: "Ava Field 2"}, 
{ id: 3, parentId: 1, Name: "New node Id 3"}, 
{ id: 4, parentId: 1, Name: "Evie Johnson 4"}, 
{ id: 5, parentId: 2, Name: "Amber McKenzie 5"}, 
{ id: 6, parentId: 3, Name: "Ava Field 6"}, 
{ id: 7, parentId: 4, Name: "New node Id 7"}, 
{ id: 8, parentId: 5, Name: "Evie Johnson 8"}]; 

function clickHandler(sender, args){ 
var id = args.node.id; 
$.ajax({ 
    type: "POST", 
    url: "get-data.php", 
    data: {source : source, id : id}, 
    success: function(data){ 
    source.push(data); 
    orgchart.config.dataSource = source; 

    orgchart.load(); 
    } 
}); 
}; 

var orgchart = new getOrgChart(document.getElementById("people"),{   
    enableSearch: false, 
    clickNodeEvent: clickHandler, 
    expandToLevel: 7, 
    linkType: "B", 
    dataSource: source 
});