orgchart - GetOrgChart に新しいノードを動的に追加する

Question

ajax で新しいノードを追加する方法はありますか? ノードをクリックすると、データベース内の情報を取得してこのノードの子を作成するために ajax リクエストが送信されます。insertNode と insertNodeEvent で試しましたが、データベースが多数送信してもノードが 1 つしか作成されません。

ありがとう

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

Answer 2

以下のコード スニペットを実行してください。次のバージョンでは、バッチ 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>