jquery plugin for org chart, use a javascript array as input. inspired by https://github.com/caprica/jquery-orgchart
- set up a as the container of org chart:
<div id="orgChart"></div>- 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.
- build orgnizational chart with:
var orgChart = $('#orgChart').orgChart({data: testData});the object return by the jQuery function could be used to invoke methods.
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.
onEditNode(node): (Function) callback when a node is edited.
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.
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.
MIT