{'id': 'rootNode',// It's a optional property which will be used as id attribute of node// and data-parent attribute, which contains the id of the parent node'className': 'top-level',// It's a optional property which will be used as className attribute of node.'nodeTitlePro': 'Lao Lao','nodeContentPro': 'general manager','relationship': relationshipValue,// Note: when you activate ondemand loading nodes feature,// you should use json datsource (local or remote) and set this property.// This property implies that whether this node has parent node, siblings nodes or children nodes.// relationshipValue is a string composed of three "0/1" identifier.// First character stands for wether current node has parent node;// Scond character stands for wether current node has siblings nodes;// Third character stands for wether current node has children node.'children': [// The property stands for nested nodes. "children" is just default name you can override.{'nodeTitlePro': 'Bo Miao','nodeContentPro': 'department manager','relationship': '110'},{'nodeTitlePro': 'Su Miao','nodeContentPro': 'department manager','relationship': '111','children': [{'nodeTitlePro': 'Tie Hua','nodeContentPro': 'senior engineer','relationship': '110'},{'nodeTitlePro': 'Hei Hei','nodeContentPro': 'senior engineer','relationship': '110'}]},{'nodeTitlePro': 'Yu Jie','nodeContentPro': 'department manager','relationship': '110'}],'otherPro': anyValue};
Options
Name
Type
Required
Default
Description
chartContainer
string
yes
selector usded to query the wrapper element of orgchart. It could be an id or an unique className.
data
json or string
yes
datasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent.
pan
boolean
no
false
Users could pan the orgchart by mouse drag&drop if they enable this option.
zoom
boolean
no
false
Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option.
direction
string
no
"t2b"
The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left").
verticalDepth
integer
no
Users can make use of this option to align the nodes vertically from the specified depth.
toggleSiblingsResp
boolean
no
false
Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.
ajaxURL
json
no
It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent.
depth
positive integer
no
999
It indicates the level that at the very beginning orgchart is expanded to.
nodeTitle
string
no
"name"
It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option.
parentNodeSymbol
string
no
"fa-users"
Using font awesome icon to imply that the node has child nodes.
nodeContent
string
no
It sets one property of datasource as text content of content section of orgchart node.
nodeId
string
no
"id"
It sets one property of datasource as unique identifier of every orgchart node.
createNode
function
no
It's a callback function used to customize every orgchart node. It recieves two parament: "$node" stands for jquery object of single node div; "data" stands for datasource of single node.
exportButton
boolean
no
false
It enable the export button for orgchart.
exportFilename
string
no
"Orgchart"
It's filename when you export current orgchart as a picture.
chartClass
string
no
""
when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them.
draggable
boolean
no
false
Users can drag & drop the nodes of orgchart if they enable this option. **Note**: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API.
dropCriteria
function
no
Users can construct their own criteria to limit the relationships between dragged node and drop zone. Furtherly, this function accept three arguments(draggedNode, dragZone, dropZone) and just only return boolen values.
fullHeight
boolean
no
It sets the height of chartContainer to fullfil the window.
Methods
I'm sure that you can grasp the key points of the methods below after you try out demo -- edit orgchart.
let orgchart = new OrgChart(options);
Embeds an organization chart in designated container. Accepts an options object and you can go through the "options" section to find which options are required.
.addParent(root, data)
Adds parent node(actullay it's always root node) for current orgchart.
Name
Type
Required
Default
Description
root
dom node
yes
root node of designated orgchart
options used for overriding initial options
data
json object
yes
datasource for building root node
##### .addSiblings(node, data)
Adds sibling nodes for designated node.
Name
Type
Required
Default
Description
node
dom node
yes
we'll add sibling nodes based on this node
data
json object
yes
datasource for building sibling nodes
##### .addChildren(node, data）
Adds child nodes for designed node.
Name
Type
Required
Default
Description
node
dom node
yes
we'll add child nodes based on this node
data
json object
yes
datasource for building child nodes
##### .removeNodes(node）
Removes the designated node and its descedant nodes.
Name
Type
Required
Default
Description
node
dom node
yes
node to be removed
##### .getHierarchy()
This method is designed to get the hierarchy relationships of orgchart for further processing. For example, after editing the orgchart, you could send the returned value of this method to server-side and save the new state of orghcart.
##### .hideChildren(node)
This method allows you to hide programatically the children of any specific node(.node element), if it has
Name
Type
Required
Default
Description
node
dom node
Yes
None
It's the desired dom node that we'll hide its children nodes
##### .showChildren(node)
This method allows you to show programatically the children of any specific node(.node element), if it has
Name
Type
Required
Default
Description
node
dom node
Yes
None
It's the desired dom node that we'll show its children nodes
##### .hideSiblings(node, direction)
This method allows you to hide programatically the siblings of any specific node(.node element), if it has
Name
Type
Required
Default
Description
node
dom node
Yes
None
It's the desired dom node that we'll hide its siblings nodes
direction
string
No
None
Possible values:"left","rigth". Specifies if hide the siblings at left or rigth. If not defined hide both of them.
##### .showSiblings(node, direction)
This method allows you to show programatically the siblings of any specific node(.node element), if it has
Name
Type
Required
Default
Description
node
dom node
Yes
None
It's the desired dom node that we'll show its siblings nodes
direction
string
No
None
Possible values:"left","rigth". Specifies if hide the siblings at left or rigth. If not defined hide both of them.
##### .getNodeState(node, relation)
This method returns you the display state of the related nodes.
Name
Type
Required
Default
Description
node
dom node
Yes
None
It's the desired dom node that we wanna know its related nodes' display state.
relation
String
Yes
None
Possible values: "parent", "children" and "siblings". Specifies the desired relation to return.
The returning object will have the next structure:
```js
{
"exists": true|false, //Indicates if has parent|children|siblings
"visible":true|false, //Indicates if the related nodes are visible
}
```
##### .getRelatedNodes(node, relation)
This method returns you the nodes related to the specified node
Name
Type
Required
Default
Description
node
dom node
Yes
None
It's the desired that we wanna get its related nodes
relation
String
Yes
None
Possible values: "parent", "children" and "siblings". Specifies the desired relation to return.
Events
Event Type
Attached Data
Description
nodedropped.orgchart
draggedNode, dragZone, dropZone
The event's handler is where you can place your customized function after node drop over. For more details, please refer to example drag & drop.
About
it's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.ts.
