bigeyex/jquery.orgchart

jquery plugin for org chart, use a javascript array as input.

jquery.orgChart

jquery plugin for org chart, use a javascript array as input. inspired by https://github.com/caprica/jquery-orgchart

see a demo here

Usage

1. set up a
   as the container of org chart:

<div id="orgChart"></div>

2. prepare your data in this format:

var testData = [
    {id: 1, name: 'Acme Organization', parent: 0},
    {id: 2, name: 'CEO Office', parent: 1},
    {id: 3, name: 'Division 1', parent: 1},
    {id: 4, name: 'Division 2', parent: 1},
    {id: 6, name: 'Division 3', parent: 1},
    {id: 7, name: 'Division 4', parent: 1},
    {id: 8, name: 'Division 5', parent: 1},
    {id: 5, name: 'Sub Division', parent: 3},        
];

Every node is an object with (in minimum) id, name, and parent.

3. build orgnizational chart with:

var orgChart = $('#orgChart').orgChart({data: testData});

the object return by the jQuery function could be used to invoke methods.

Option List

All the options are optional.

data: (Array) the initial data of the org chart.

showControls: (Boolean/false) on/off for display add or remove node button.

allowEdit: (Boolean/false) on/off for allowing users to click on the node's title to edit its name.

onAddNode(node): (Function) callback function when "Add Child" button is clicked. Note that this will prevent the node from automatically created, so developers need to call newNode(parentId) to actually create the node.

onDeleteNode(node): (Function) callback function when "Delete Node" button is clicked. Note that this will prevent the node from automatically deleted, so developers need to call deleteNode(id) to actually delete the node.

onClickNode(node): (Function) callback when a node is clicked.

newNodeText: (String/"Add Child") text displayed on the "Add Child" button.

Note that in the callback options "onAddNode", "onDeleteNode", "onClickNode", a Node object will be passed as the parameter. You can access the data via node.data.

Methods

startEdit(id): let a node enter edit mode.

newNode(parentId): create a node as a subnode of node number parentId.

addNode(data): add a node carrying specific data.

deleteNode(id): delete the node with specific id.

getData(): get all the node data of the org chart in an array.

License

MIT

jquery.orgchart's Issues

Export

Hi, how we export this data?

Angular 4+ support

Hi @bigeyex ,
Can you please provide Angular wrapper for this orgChart? It will be a great help.
Thanks in advance.

Issue in deleting Child Nodes

//Old Code
/*this.deleteNode = function(id){
for(var i=0;i<nodes[id].children.length;i++){
self.deleteNode(nodes[id].children[i].data.id);
}
nodes[nodes[id].data.parent].removeChild(id);
delete nodes[id];
self.draw();
}

//Working Code
this.deleteNode = function(id){
while(nodes[id].children.length){
self.deleteNode(nodes[id].children[nodes[id].children.length-1].data.id);
}
nodes[nodes[id].data.parent].removeChild(id);
delete nodes[id];
self.draw();
}

H2

IS it easily possible to integrate an additional heading, ie H3, so that it sits under H2 in each box?

Manythanks

dynamically set the box dimensions

I would like to dynamically set the box dimension based on how much text are in them.
Making some larger if there is text overflow.
is this possible?

How to integrate Drag & Drop feature

Thanks for giving this wonderful component and satisfy my needs. I am newbie to Jquery. I want to enable drag & drop feature with this org chart. Could you please integrate the drag and drop feature also. So that nodes can be dragged and dropped to other existing nodes.

After level 32 in firefox tree is breaking

Hi,
Thanks for the plugin with great features.
Currently when try to add a node after level 32, user cannot see the nodes. But same solution works good in chrome.only lines are visible in Firefox as screenshot given below.

Please help us to solve the issue.

Thanks in advance,
Sudeesh.B

Left and Right sides

If am pulling data from a server and each row has a left and right side stored in the DB how do arrange them according to the side?