orgchart.js 组织架构图之JQuery插件

 # Read this in other languages: [简体中文](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md), [繁體中文](https://github.com/dabeng/OrgChart/blob/master/README.zh-tw.md) # [ES6 Version](http://github.com/dabeng/OrgChart.js) # [Web Components Version](http://github.com/dabeng/OrgChart-Webcomponents) # [Vue.js Version](https://github.com/dabeng/vue-orgchart) # [Angular Version -- the most space-saving solution](https://github.com/dabeng/ng-orgchart) # [React Version](https://github.com/dabeng/react-orgchart) ## Foreword First of all, thanks a lot for [wesnolte](https://github.com/wesnolte)'s great work:blush: -- [jOrgChart](https://github.com/wesnolte/jOrgChart). The thought that using nested tables to build out the tree-like orgonization 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.** ## 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 to multiple-layers or 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) 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. ## [Demos on github pages](https://dabeng.github.io/OrgChart/) ## [Demos based on nested table](https://codepen.io/collection/AWxGVb/) ## [Demos based on nested ul](https://codepen.io/collection/nWqvzY) ### online demos - [using ul datasource](https://dabeng.github.io/OrgChart/ul-datasource.html)(this feature comes from [Tobyee's good idea:blush:](https://github.com/dabeng/OrgChart/issues/1)) - [using local datasource](https://dabeng.github.io/OrgChart/local-datasource.html) - [I wanna pan&zoom the orgchart](https://dabeng.github.io/OrgChart/pan-zoom.html) - I wanna align orgchart with different orientation**(this feature comes from [the good idea of fvlima and badulesia :blush:](https://github.com/dabeng/OrgChart/issues/5)) Top to Bottom -- default direction, as you can see all other examples on this page. [Bottom to Top](https://dabeng.github.io/OrgChart/bottom2top.html) [Left to Right](https://dabeng.github.io/OrgChart/left2right.html) [Right to Left](https://dabeng.github.io/OrgChart/right2left.html) - [I wanna show/hide left/right sibling nodes respectively by clicking left/right arrow](https://dabeng.github.io/OrgChart/toggle-sibs-resp.html) - [I wanna load datasource through ajax](https://dabeng.github.io/OrgChart/ajax-datasource.html) - [I wanna load data on-demand](https://dabeng.github.io/OrgChart/ondemand-loading-data.html) Note: when users use ajaxURL option to build orghchart, they must use json datasource(both local and remote are OK) and 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](https://dabeng.github.io/OrgChart/option-createNode.html) - [I wanna export the organization chart as a picture](https://dabeng.github.io/OrgChart/export-chart.html) Here, we need the help from [html2canvas](https://github.com/niklasvh/html2canvas). **Note:** (1) if you wanna export something in IE or Edge, please introduce [es6-promise.auto.js](https://github.com/stefanpenner/es6-promise) 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](https://github.com/sayamkrai)'s [exploration](https://github.com/dabeng/OrgChart/issues/152)) (3) Besides, if you wanna export a pdf format or your orgchart includes picture, you have to introduce [jspdf](https://github.com/MrRio/jsPDF) and set "exportFileextension" option to "pdf". - [I wanna export the orgchart with nodes containing pictures](https://dabeng.github.io/OrgChart/export-chart-with-pictures.html) You need to set crossorigin to anonymous for your img tags.  - [I wanna itegrate organization chart with geographic information](https://dabeng.github.io/OrgChart/integrate-map.html) Here, we fall back on [OpenLayers](https://github.com/openlayers/ol3). It's the most aewsome open-source js library for Web GIS you sholdn't miss. - [I wanna edit orgchart](https://dabeng.github.io/OrgChart/edit-chart.html) 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](https://dabeng.github.io/OrgChart/drag-drop.html) 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](https://dabeng.github.io/OrgChart/get-hierarchy.html) That's where getHierarchy() comes in. - [I want a color-coded chart](https://dabeng.github.io/OrgChart/color-coded.html) It's a so easy task, we just need to append id or className property to node data. - [I want a multiple-layers chart](https://dabeng.github.io/OrgChart/multiple-layers.html) In fact, this is a wonderful solution to display a orgchart which includes a huge number of node data. - [I want a hybrid(horizontal + vertical) chart](https://dabeng.github.io/OrgChart/vertical-level.html) This feature is inspired by the issues([Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)). Thank [mfahadi](https://github.com/mfahadi) and [Destructrix](https://github.com/Destructrix) for their constructive suggestions:blush: Special thanks to [tedliang](https://github.com/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](https://dabeng.gith