简体文档, 繁體文档

ES6 Version

Web Components Version

Vue.js Version

Angular Version

React Version

Foreword

First of all, thanks a lot for wesnolte's great work:blush: -- jOrgChart. The thought that using nested tables to build out the tree-like organization chart is amazing. This idea is more simple and direct than its counterparts based on svg Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I got some interesting ideas to add, so I choose to create a new repo.

• Since version 3.0, we use nested ul to construct tree-like chart instead of nested table.
• Since version 4.0, users build up the ajax datasoure by themselves.

Features

• Supports both local data and remote data (JSON).
• Smooth expand/collapse effects based on CSS3 transitions.
• Align the chart in 4 orientations.
• Allows user to change orgchart structure by drag/drop nodes.
• Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object.
• Supports exporting chart as a picture or pdf document.
• Supports pan and zoom.
• Allows user to customize the internal structure for every node.
• Users can adopt multiple solutions to build up a huge organization chart(please refer hybrid layout sections).
• touch-enabled plugin for mobile device.

CDN

Users could find the related CDN support for OrgChart's CSS and JavaScript.

https://cdnjs.com/libraries/orgchart

Installation

Of course, you can directly use the standalone build by including dist/js/jquery.orgchart.js and dist/css/jquery.orgchart.css in your webapps.

Install with Bower

# From version 1.0.2 on, users can install orgchart and add it to bower.json dependencies
$ bower install orgchart

Install with npm

# From version 1.0.4 on, users can install orgchart with npm
$ npm install orgchart

require('orgchart') will load orgchart plugin onto the jQuery object. The orgchart module itself does not export anything.

FYI, How to use jQuery Orchart in React

Demos on github pages

Demos based on nested ul

Demos based on nested table (obsolete)

online demos

• using ul datasource(this feature comes from Tobyee's good idea :blush:)

• using local datasource

• I wanna pan&zoom the orgchart

• I wanna align orgchart with different orientation**(this feature comes from the good idea of fvlima and badulesia :blush:)

  Top to Bottom -- default direction, as you can see all other examples on this page.

  Bottom to Top

  Left to Right

  Right to Left

• I wanna show/hide left/right sibling nodes respectively by clicking left/right arrow

• I wanna load datasource through ajax

• I wanna load data on-demand

Note: users use should set the relationship property of datasource by themselves. All of these staff are used to generate the correct expanding/collapsing arrows for nodes.

• I wanna customize the structure of node

• I wanna export the organization chart as a picture

Here, we need the help from html2canvas.

Note:

(1) if you wanna export something in IE or Edge, please introduce es6-promise.auto.js firstly.

(2) if your OS is windows, please check your display scaling settings. For the perfact exported picture, you'd better adjust "Change the size of text, apps, and other items" to 100%.(thanks for sayamkrai's exploration)

(3) Besides, if you wanna export a pdf format or your orgchart includes picture, you have to introduce jspdf and set "exportFileextension" option to "pdf".

• I wanna export the orgchart with nodes containing pictures

You need to set crossorigin to anonymous for your img tags.

• I wanna itegrate organization chart with geographic information

Here, we fall back on OpenLayers. It's the most aewsome open-source js library for Web GIS you sholdn't miss.

• I wanna edit orgchart

With the help of exposed core methods(addParent(), addSiblings(), addChildren(), removeNodes()) of orgchart plugin, we can finish this task easily.

• I wanna drag & drop the nodes of orgchart

Users are allowed to drag & drop the nodes of orgchart when option "draggable" is assigned to true(Note: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API).

Furthermore, users can make use of option dropCriteria to inject their custom limitations on drag & drop. As shown below, we don't want an manager employee to be under a engineer under no circumstance.

• I want a method that can describe the hierarchy of orgchart

That's where getHierarchy() comes in.

• I want a color-coded chart

It's a so easy task, we just need to append id or className property to node data.

• I want a hybrid(horizontal + vertical) chart

This feature is inspired by the issues(Aligning Children Vertical, Hybrid(horizontal + vertical) OrgChart). Thank mfahadi and Destructrix for their constructive suggestions:blush: Special thanks to tedliang for his wonderful hybrid mode solution.

From now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option "verticalLevel" allows users to align child nodes vertically from the given level.

Note: currently, this option is incompatible with many other options or methods, like direction, drag&drop, addChildren(), removeNodes(), getHierarchy() and so on. These conflicts will be solved one by one in the later versions.

• I want to collapse some nodes by default

No problem. You just need to adjust a little detail of datasource with the help of option "collapse" and className "slide-up".

• I want to refresh orgchart base on new options or datasource

It's not a big deal. You just turn to the method init().

• I want to use complex template to customize the internal structure of every node

No problem. With the help of ES6 Template literals, we can customize the any complex node structure rather than the common title and content sections.

• I want to position node in specific level. How can i do that ?

You need the solution based on new datasource structure with levelOffset data prop + callback createNode() + CSS custom properties(variables)

• I want a orgchart with nodes of different widths

• I want to drag&drop in the hybrid chart

• I only want specific children of a certain branch of the chart to be displayed as vertical. Is it possible to set VerticalLevel by data?

hybrid data property is designed for your use case. Once node data includes a "hybrid" prop with truthy value, its descendant nodes will be arranged vertically.

• I want to replace built-in icons with Font Awesome icons

• I want to alternate layout if children is too many

compact data property is designed for your use case. Once no