orgchart - 在 GetOrgChart 上动态添加新节点

Question

有没有用 ajax 添加新节点的方法？我希望当我单击一个节点时，发送一个 ajax 请求以获取数据库中的信息并为该节点创建子节点。我尝试使用 insertNode 和 inserNodeEvent，但即使数据库发送了很多，也只创建了一个节点。

谢谢

Answer 1

请运行下面的代码片段。下一个版本将支持批量 insertNode 方法

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"),{			
  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

谢谢你的回答，我还有一个问题。无法向源添加新数据，ajax请求只发送名称

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
});