在 GetOrgChart 上动态添加新节点

Posted 2023-02-16

【中文标题】在 GetOrgChart 上动态添加新节点

【英文标题】：Add new nodes dynamycally on GetOrgChart

【发布时间】：2017-04-20 22:50:52

【问题描述】：

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

谢谢

【参考方案1】：

感谢您的回答，我还有一个问题。无法向源添加新数据，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
);

【参考方案2】：

请运行下面的代码 sn-p。下个版本将支持批量 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>