如何在lib orgChart2中添加Child节点 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)
答案 0 :(得分:0)
您必须创建根节点。
// 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();
})();