{"id":13829579,"url":"https://dabeng.github.io/OrgChart/","last_synced_at":"2025-07-09T10:30:48.033Z","repository":{"id":37390561,"uuid":"51210673","full_name":"dabeng/OrgChart","owner":"dabeng","description":"It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.","archived":false,"fork":false,"pushed_at":"2024-10-24T05:59:00.000Z","size":30411,"stargazers_count":2869,"open_issues_count":382,"forks_count":770,"subscribers_count":154,"default_branch":"master","last_synced_at":"2024-10-29T10:53:30.565Z","etag":null,"topics":["chart","jquery","org","organization","orgchart","tree"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dabeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-06T16:36:42.000Z","updated_at":"2024-10-28T22:21:57.000Z","dependencies_parsed_at":"2023-02-16T13:30:40.370Z","dependency_job_id":"fceb07de-4727-44a5-b4d7-2c75bb6fc863","html_url":"https://github.com/dabeng/OrgChart","commit_stats":{"total_commits":576,"total_committers":38,"mean_commits":"15.157894736842104","dds":"0.38541666666666663","last_synced_commit":"df2246f37264e952acbe809d6ba9a27e0a447e6b"},"previous_names":[],"tags_count":101,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2FOrgChart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2FOrgChart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2FOrgChart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2FOrgChart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabeng","download_url":"https://codeload.github.com/dabeng/OrgChart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225533017,"owners_count":17484179,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","jquery","org","organization","orgchart","tree"],"created_at":"2024-08-04T10:00:40.010Z","updated_at":"2025-07-09T10:30:48.023Z","avatar_url":"https://github.com/dabeng.png","language":"JavaScript","readme":"![OrgChart](http://dabeng.github.io/OrgChart/img/heading.png)\n\n# [简体文档](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md), [繁體文档](https://github.com/dabeng/OrgChart/blob/master/README.zh-tw.md)\n\n# [ES6 Version](http://github.com/dabeng/OrgChart.js)\n# [Web Components Version](http://github.com/dabeng/OrgChart-Webcomponents)\n# [Vue.js Version](https://github.com/dabeng/vue-orgchart)\n# [Angular Version](https://github.com/dabeng/ng-orgchart)\n# [React Version](https://github.com/dabeng/react-orgchart)\n\n## Foreword\nFirst 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 organization chart is amazing. This idea is more simple and direct than its counterparts based on svg\nUnfortunately, 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. \n- Since version 3.0, we use nested ul to construct tree-like chart instead of nested table.\n- Since version 4.0, users build up the ajax datasoure by themselves.\n\n## Features\n- Supports both local data and remote data (JSON).\n- Smooth expand/collapse effects based on CSS3 transitions.\n- Align the chart in 4 orientations.\n- Allows user to change orgchart structure by drag/drop nodes.\n- Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object.\n- Supports exporting chart as a picture or pdf document.\n- Supports pan and zoom.\n- Allows user to customize the internal structure for every node.\n- Users can adopt multiple solutions to build up a huge organization chart(please refer hybrid layout sections).\n- touch-enabled plugin for mobile device.\n\n## CDN\nUsers could find the related CDN support for OrgChart's CSS and JavaScript.\n\n[![cdnjs](https://img.shields.io/cdnjs/v/orgchart)](https://cdnjs.com/libraries/orgchart) https://cdnjs.com/libraries/orgchart\n\n## Installation\nOf course, you can directly use the standalone build by including dist/js/jquery.orgchart.js and dist/css/jquery.orgchart.css in your webapps.\n### Install with Bower\n```\n# From version 1.0.2 on, users can install orgchart and add it to bower.json dependencies\n$ bower install orgchart\n```\n\n### Install with npm\n```\n# From version 1.0.4 on, users can install orgchart with npm\n$ npm install orgchart\n```\nrequire('orgchart') will load orgchart plugin onto the jQuery object. The orgchart module itself does not export anything.\n\nFYI, [How to use jQuery Orchart in React](https://stackblitz.com/edit/vitejs-vite-hqv4nbdt)\n\n## [Demos on github pages](https://dabeng.github.io/OrgChart/)\n## [Demos based on nested ul](https://codepen.io/collection/xKmPeK)\n## [Demos based on nested table](https://codepen.io/collection/AWxGVb/) (obsolete)\n\n### online demos\n- [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))\n\n- [using local datasource](https://dabeng.github.io/OrgChart/local-datasource.html)\n\n- [I wanna pan\u0026zoom the orgchart](https://dabeng.github.io/OrgChart/pan-zoom.html)\n\n- 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))\n\n  Top to Bottom -- default direction, as you can see all other examples on this page.\n\n  [Bottom to Top](https://dabeng.github.io/OrgChart/bottom2top.html)\n\n  [Left to Right](https://dabeng.github.io/OrgChart/left2right.html)\n\n  [Right to Left](https://dabeng.github.io/OrgChart/right2left.html)\n\n- [I wanna show/hide left/right sibling nodes respectively by clicking left/right arrow](https://dabeng.github.io/OrgChart/toggle-sibs-resp.html)\n\n- [I wanna load datasource through ajax](https://dabeng.github.io/OrgChart/ajax-datasource.html)\n\n- [I wanna load data on-demand](https://dabeng.github.io/OrgChart/ondemand-loading-data.html)\n\n![ondemand-loading-data](http://dabeng.github.io/OrgChart/img/ondemand-loading-data.gif)\n\n**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.\n\n- [I wanna customize the structure of node](https://dabeng.github.io/OrgChart/option-createNode.html)\n\n- [I wanna export the organization chart as a picture](https://dabeng.github.io/OrgChart/export-chart.html)\n\nHere, we need the help from [html2canvas](https://github.com/niklasvh/html2canvas).\n\n**Note:**\n\n(1) if you wanna export something in IE or Edge, please introduce [es6-promise.auto.js](https://github.com/stefanpenner/es6-promise) firstly.\n\n(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))\n\n(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\".\n\n- [I wanna export the orgchart with nodes containing pictures](https://dabeng.github.io/OrgChart/export-chart-with-pictures.html)\n\nYou need to set crossorigin to anonymous for your img tags.\n\n![export-chart-with-pictures](http://dabeng.github.io/OrgChart/img/export-chart-with-pictures.png)\n\n- [I wanna itegrate organization chart with geographic information](https://dabeng.github.io/OrgChart/integrate-map.html)\n\nHere, 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.\n\n- [I wanna edit orgchart](https://dabeng.github.io/OrgChart/edit-chart.html)\n\nWith the help of exposed core methods(addParent(), addSiblings(), addChildren(), removeNodes()) of orgchart plugin, we can finish this task easily.\n\n- [I wanna drag \u0026 drop the nodes of orgchart](https://dabeng.github.io/OrgChart/drag-drop.html)\n\nUsers are allowed to drag \u0026 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 \u0026 drop API).\n\nFurthermore, users can make use of option dropCriteria to inject their custom limitations on drag \u0026 drop. As shown below, we don't want an manager employee to be under a engineer under no circumstance.\n\n- [I want a method that can describe the hierarchy of orgchart](https://dabeng.github.io/OrgChart/get-hierarchy.html)\n\nThat's where getHierarchy() comes in.\n\n- [I want a color-coded chart](https://dabeng.github.io/OrgChart/color-coded.html)\n\nIt's a so easy task, we just need to append id or className property to node data.\n\n- [I want a hybrid(horizontal + vertical) chart](https://dabeng.github.io/OrgChart/vertical-level.html)\n\nThis 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.\n\nFrom 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.\n\n**Note**: currently, this option is incompatible with many other options or methods, like direction, drag\u0026drop, addChildren(), removeNodes(), getHierarchy() and so on. These conflicts will be solved one by one in the later versions.\n\n- [I want to collapse some nodes by default](https://dabeng.github.io/OrgChart/default-collapsed.html)\n\nNo problem. You just need to adjust a little detail of datasource with the help of option \"collapse\" and className \"slide-up\".\n\n- [I want to refresh orgchart base on new options or datasource](https://dabeng.github.io/OrgChart/reload-data.html)\n\nIt's not a big deal. You just turn to the method init().\n\n- [I want to use complex template to customize the internal structure of every node](https://dabeng.github.io/OrgChart/custom-template.html)\n\nNo problem. With the help of ES6 Template literals, we can customize the any complex node structure rather than the common title and content sections.\n\n- [I want to position node in specific level. How can i do that ?](https://dabeng.github.io/OrgChart/level-offset.html)\n\n![level-offset](http://dabeng.github.io/OrgChart/img/level-offset.png)\n\nYou need the solution based on new datasource structure with **levelOffset data prop** + callback createNode() + CSS custom properties(variables)\n\n- [I want a orgchart with nodes of different widths](https://dabeng.github.io/OrgChart/nodes-of-different-widths.html)\n\n![nodes-of-different-widths](http://dabeng.github.io/OrgChart/img/nodes-of-different-widths.png)\n\n- [I want to drag\u0026drop in the hybrid chart](https://dabeng.github.io/OrgChart/drag-drop-hybrid-chart.html)\n\n- [ 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?](https://dabeng.github.io/OrgChart/data-prop-hybrid.html)\n\n![data-prop-hybrid](http://dabeng.github.io/OrgChart/img/data-prop-hybrid.png)\n\n**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.\n\n- [I want to replace built-in icons with Font Awesome icons](https://dabeng.github.io/OrgChart/custom-icons.html)\n\n- [ I want to alternate layout if children is too many](https://dabeng.github.io/OrgChart/data-prop-compact.html)\n\n![data-prop-compact](http://dabeng.github.io/OrgChart/img/data-prop-compact.png)\n\n**compact data property** is designed for your use case. Once node data includes a \"compact\" prop with truthy value, itself and its descendant nodes will be arranged with compact mode.\n\n- [ I want to visualize genealogy/pedigree/family tree information](https://dabeng.github.io/OrgChart/family-tree.html)\n\n![family-tree](http://dabeng.github.io/OrgChart/img/family-tree.png)\n\nWe use the following two-dimensional array datasource to build up the Family Tree. Here, prop \"gender\" is optional.\n```\nvar datascource = [\n  [\n    { 'id': '8', 'name': 'Lao Ye', 'title': 'Grandfather' },\n    { \n      'id': '1', 'name': 'Lao Lao', 'title': 'Grandmother',  'outsider': true,\n      'children': [\n        [\n          { 'id': '2', 'name': 'Bo miao', 'title': 'Aunt' }\n        ],\n        [\n          { 'id': '3', 'name': 'Su Miao', 'title': 'Mother',\n            'children': [\n              [\n              \n                { 'id': '12', 'name': 'Pang Pang', 'title': 'Wife', 'outsider': true,\n                  'children': [\n                    [{ 'id': '7', 'name': 'Dan Dan', 'title': 'Daughter' }],\n                    [{ 'id': '6', 'name': 'Er Dan', 'title': 'Daughter' }],\n                  ]\n                },\n                { 'id': '5', 'name': 'Hei Hei', 'title': 'Me' },\n              ]\n            ]\n          },\n          { 'id': '9', 'name': 'Tie Hua', 'title': 'Father', 'outsider': true }\n        ],\n        [\n          { 'id': '10', 'name': 'Hong miao', 'title': 'Aunt' }\n        ]\n      ]\n    }\n  ]\n];\n```\n\n- [I want to add property tags to family tree](https://dabeng.github.io/OrgChart/familytree-custom-properties.html)\n\n![familytree-custom-properties](http://dabeng.github.io/OrgChart/img/familytree-custom-properties.png)\n\n### how to start up demos locally\n\n- you have to install node.js v6+ because our unit tests are based on jsdom v11\n- you have to install modern browsers because many behaviors of orgchart plugin are based on HTML5 and CSS3\n- run ```npm install``` to install necessary dependencies\n- run ```npm test``` to run all tests including unit tests, integration tests and e2e tests\n- run ```npm run build``` to generate production js\u0026css files of plugin\n- run ```npm start``` to start up local web server to host all the demos\n\n## Usage\n\n### Instantiation Statement\n```js\nvar oc = $('#chartContainerId').orgchart(options);\n```\n\n### Structure of Datasource\n```js\n{\n  'id': 'rootNode', // It's a optional property which will be used as id attribute of node\n  // and data-parent attribute, which contains the id of the parent node\n  'collapsed': true, // By default, the children nodes of current node is hidden.\n  'className': 'top-level', // It's a optional property\n  // which will be used as className attribute of node.\n  'nodeTitle': 'name', // This property is used to retrieve “title” value in datasource\n  'nodeContent': 'title',// This property is used to retrieve \"content\" value in datasource\n  'relationship': relationshipValue, // Note: when you activate ondemand loading nodes feature,\n  // you should use json datsource (local or remote) and set this property.\n  // This property implies that whether this node has parent, siblings, children.\n  // relationshipValue is a string composed of three \"0/1\" identifier.\n  // First character stands for wether current node has parent node;\n  // Scond character stands for wether current node has siblings nodes;\n  // Third character stands for wether current node has children node.\n  'children': [ // The property stands for nested nodes.\n    { 'name': 'Bo Miao', 'title': 'department manager', 'relationship': '110' },\n    { 'name': 'Su Miao', 'title': 'department manager', 'relationship': '111',\n      'children': [\n        { 'name': 'Tie Hua', 'title': 'senior engineer', 'relationship': '110' },\n        { 'name': 'Hei Hei', 'title': 'senior engineer', 'relationship': '110' }\n      ]\n    },\n    { 'name': 'Yu Jie', 'title': 'department manager', 'relationship': '110' }\n  ],\n  'otherPro': anyValue // feel free to append any useful properties\n};\n```\n\n### Data Props\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ehybrid\u003c/td\u003e\n      \u003ctd\u003etruthy value\u003c/td\u003e\n      \u003ctd\u003enodes will be arranged vertically if this property is set to true\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecompact\u003c/td\u003e\n      \u003ctd\u003etruthy value\u003c/td\u003e\n      \u003ctd\u003enode will be rendered with compact mode if this property is set to true\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Options\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edata\u003c/td\u003e\n      \u003ctd\u003ejson or jquery object\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003edatasource usded to build out structure of orgchart. It could be a json object or a jquery object(ul element)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003epan\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eUsers could pan the orgchart by mouse drag\u0026drop if they enable this option.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ezoom\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eUsers could zoomin/zoomout the orgchart by mouse wheel if they enable this option.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ezoominLimit\u003c/td\u003e\n      \u003ctd\u003enumber\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e7\u003c/td\u003e\n      \u003ctd\u003eUsers are allowed to set a zoom-in limit.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ezoomoutLimit\u003c/td\u003e\n      \u003ctd\u003enumber\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e0.5\u003c/td\u003e\n      \u003ctd\u003eUsers are allowed to set a zoom-out limit.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edirection\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\"t2b\"\u003c/td\u003e\n      \u003ctd\u003eThe 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\").\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003everticalLevel\u003c/td\u003e\n      \u003ctd\u003einteger(\u003e=2)\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eUsers can make use of this option to align the nodes vertically from the specified level.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etoggleSiblingsResp\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eOnce enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evisibleLevel\u003c/td\u003e\n      \u003ctd\u003epositive integer\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e999\u003c/td\u003e\n      \u003ctd\u003eIt indicates the level that at the very beginning orgchart is expanded to.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodeTitle\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\"name\"\u003c/td\u003e\n      \u003ctd\u003eIt 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.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eparentNodeSymbol\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\"oci-menu\"\u003c/td\u003e\n      \u003ctd\u003eUsing your own icon to imply that the node has child nodes.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodeContent\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eIt sets one property of datasource as text content of content section of orgchart node.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodeId\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\"id\"\u003c/td\u003e\n      \u003ctd\u003eIt sets one property of datasource as unique identifier of every orgchart node.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodeTemplate\u003c/td\u003e\n      \u003ctd\u003efunction\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eIt's a template generation function used to customize any complex internal structure of node. It receives only one parameter: \"data\" stands for json datasoure which will be used to render one node.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecreateNode\u003c/td\u003e\n      \u003ctd\u003efunction\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eIt's a callback function used to customize every orgchart node. It receives two parameters: \"$node\" stands for jquery object of single node div; \"data\" stands for datasource of single node.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eexportButton\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eIt enable the export button for orgchart.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eexportButtonName\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\"Export\"\u003c/td\u003e\n      \u003ctd\u003eIt's export button name.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eexportFilename\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\"Orgchart\"\u003c/td\u003e\n      \u003ctd\u003eIt's filename when you export current orgchart as a picture.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eexportFileextension\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\"png\"\u003c/td\u003e\n      \u003ctd\u003eAvailable values are png and pdf.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003echartClass\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\"\"\u003c/td\u003e\n      \u003ctd\u003ewhen you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edraggable\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eUsers can drag \u0026 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 \u0026 drop API.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edropCriteria\u003c/td\u003e\n      \u003ctd\u003efunction\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eUsers 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.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003einitCompleted\u003c/td\u003e\n      \u003ctd\u003efunction\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eIt can often be useful to know when your table has fully been initialised, data loaded and rendered. It receives one parament: \"$chart\" stands for jquery object of initialised chart.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eicons\u003c/td\u003e\n      \u003ctd\u003ejson\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eUsers can use this option to plug Font Awesome icons back in.\n        \u003cpre\u003e\n          \u003ccode\u003e\n'icons': {\n  'theme': 'fa-solid fa-sm',\n  'parentNode': 'fa-user-tie',\n  'expandToUp': 'fa-angles-up',\n  'collapseToDown': 'fa-angles-down',\n  'collapseToLeft': 'fa-angles-left',\n  'expandToRight': 'fa-angles-right',\n  'collapsed': 'fa-circle-plus',\n  'expanded': 'fa-circle-minus'\n}\n          \u003c/code\u003e\n        \u003c/pre\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecompact\u003c/td\u003e\n      \u003ctd\u003efunction\u003c/td\u003e\n      \u003ctd\u003eno\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eThis callback is used to determine current node is wether rendered with compact mode. The node's data is passed in as a parameter. \u003cb\u003eNote:\u003c/b\u003eThe option \"compact\" has a higher priority than data prop \"compact\".\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Methods\nI'm sure that you can grasp the key points of the methods below after you try out demo -- [edit orgchart](http://dabeng.github.io/OrgChart/edit-orgchart/).\n\n#### var oc = $container.orgchart(options)\nEmbeds an organization chart in designated container. Accepts an options object and you can go through the \"options\" section to find which options are required. Variable oc is the instance of class OrgChart.\n\n#### init(newOptions)\nIt's the useful way when users want to re-initialize or refresh orgchart based on new options or reload new data.\n\n#### addAncestors(data, parentId)\nAdds the ancestors for current orgchart.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edata\u003c/td\u003e\n      \u003ctd\u003ejson\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003edatasource for building ancestors\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eparentId\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eappend current orgchart to the parent node with parentId\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### addDescendants(data, $parent)\nAdds the descendants for specified parent node.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edata\u003c/td\u003e\n      \u003ctd\u003earray\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003edatasource for building descendants\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e$parent\u003c/td\u003e\n      \u003ctd\u003ejquery object\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eappend descendants to the $parent node\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### addParent(data)\nAdds parent node(actullay it's always root node) for current orgchart.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edata\u003c/td\u003e\n      \u003ctd\u003ejson object\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003edatasource for building root node\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### addSiblings($node, data)\nAdds sibling nodes for designated node.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e$node\u003c/td\u003e\n      \u003ctd\u003ejquery object\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003ewe'll add sibling nodes based on this node\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edata\u003c/td\u003e\n      \u003ctd\u003earray\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003edatasource for building sibling nodes\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### addChildren($node, data)\nAdds child nodes for designed node.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e$node\u003c/td\u003e\n      \u003ctd\u003ejquery object\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003ewe'll add child nodes based on this node\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edata\u003c/td\u003e\n      \u003ctd\u003earray\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003edatasource for building child nodes\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### removeNodes($node）\nRemoves the designated node and its descedant nodes.\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e$node\u003c/td\u003e\n      \u003ctd\u003ejquery object\u003c/td\u003e\n      \u003ctd\u003eyes\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003enode to be removed\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### getHierarchy()\nThis 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.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eincludeNodeData\u003c/td\u003e\n    \u003ctd\u003eBoolean\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n    \u003ctd\u003eThis optional parameter determines whether include the nodeData items in the generated JSON object in addition to the id and children\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### hideParent($node)\nThis method allows you to hide programatically the parent node of any specific node(.node element), if it has.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to hide its parent node. Of course, its sibling nodes will be hidden at the same time\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### showParent($node)\nThis method allows you to show programatically the parent node of any specific node(.node element), if it has.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to show its parent node\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### hideChildren($node)\nThis method allows you to hide programatically the children of any specific node(.node element), if it has.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to hide its children nodes\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### showChildren($node)\nThis method allows you to show programatically the children of any specific node(.node element), if it has.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to show its children nodes\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### hideSiblings($node, direction)\nThis method allows you to hide programatically the siblings of any specific node(.node element), if it has.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to hide its siblings nodes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edirection\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003ePossible values:\"left\",\"rigth\". Specifies if hide the siblings at left or rigth. If not defined hide both of them.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### showSiblings($node, direction)\nThis method allows you to show programatically the siblings of any specific node(.node element), if it has.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to show its siblings nodes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edirection\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003ePossible values:\"left\",\"rigth\". Specifies if show the siblings at left or rigth. If not defined show both of them.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### getNodeState($node, relation)\nThis method returns you the display state of related node of the specified node.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to know its related nodes' display state.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003erelation\u003c/td\u003e\n    \u003ctd\u003eString\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003ePossible values: \"parent\", \"children\" and \"siblings\". Specifies the desired relation to return.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nThe returning object will have the following structure:\n```js\n{\n  \"exist\": true|false, // Indicates if has parent|children|siblings\n  \"visible\":true|false, // Indicates if the relationship nodes are visible\n}\n```\n\n#### getRelatedNodes($node, relation)\nThis method returns you the nodes related to the specified node.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to know its related nodes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003erelation\u003c/td\u003e\n    \u003ctd\u003eString\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003ePossible values: \"parent\", \"children\" and \"siblings\". Specifies the desired relation to return.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### getParent($node)\nThis method returns you the parent node of the specified node.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to know its parent node\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### getSiblings($node)\nThis method returns you the sibling nodes of the specified node.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to know its sibling nodes\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### getChildren($node)\nThis method returns you the child nodes of the specified node.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$node\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's the desired JQuery Object to know its child nodes\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### setChartScale($chart, newScale)\nThis method helps you set the specified chart with new scale.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e$chart\u003c/td\u003e\n    \u003ctd\u003eJQuery Object\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003eIt's a chart in your chart-container\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003enewScale\u003c/td\u003e\n    \u003ctd\u003eFloat\u003c/td\u003e\n    \u003ctd\u003eYes\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n    \u003ctd\u003ePositive float value which is used to zoom in/out the chart\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### export(exportFilename, exportFileextension)\nThis method allow you to export current orgchart as png or pdf file.\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eName\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eexportFilename\u003c/td\u003e\n    \u003ctd\u003eString\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e'OrgChart'\u003c/td\u003e\n    \u003ctd\u003eIt's the name of exported file\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eexportFileextension\u003c/td\u003e\n    \u003ctd\u003eString\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003e'png'\u003c/td\u003e\n    \u003ctd\u003eIt's the extension name of exported file\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Events\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n    \u003cth\u003eEvent Type\u003c/th\u003e\n    \u003cth\u003eAdditional Parameters\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodedrop.orgchart\u003c/td\u003e\n      \u003ctd\u003edraggedNode, dragZone, dropZone\u003c/td\u003e\n      \u003ctd\u003eThe event's handler is where you can place your customized function after node drop over. For more details, please refer to \u003ca target=\"_blank\" href=\"http://dabeng.github.io/OrgChart/drag-drop/\"\u003eexample drag \u0026 drop\u003c/a\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003einit.orgchart\u003c/td\u003e\n      \u003ctd\u003echart\u003c/td\u003e\n      \u003ctd\u003eInitialisation complete event - fired when Organization Chart has been fully initialised and data loaded.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshow-[relation].orgchart\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eThis event is fired when related nodes of a node become visible.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ehide-[relation].orgchart\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eThis event if fired when related nodes of a node are collapsed.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Tips\n#### How can I deactivate expand/collapse feature of orgchart?\nThis use case is inspired by the [issue](https://github.com/dabeng/OrgChart/issues/25). Thanks [der-robert](https://github.com/der-robert) and [ActiveScottShaw](https://github.com/ActiveScottShaw) for their constructive discussions:blush:\n\nUsers can enable/disable exapand/collapse feature with className \"noncollapsable\" as shown below.\n```js\n$('.orgchart').addClass('noncollapsable'); // deactivate\n\n$('.orgchart').removeClass('noncollapsable'); // activate\n```\n\n#### Why is the root node gone?\nWhen I have a huge orgchart with enabled \"pan\" option, if I hide all the children of one of the topmost parents then the chart disappear from screen. It seems that we need to add a reset button to keep the chart visible.\nFor details, please refer to the [issue](https://github.com/dabeng/OrgChart/issues/85) opened by [manuel-84](https://github.com/manuel-84) :blush:\n\nUsers can embed any clear up logics into the click handler of the reset buttton as shown below.\n```js\n$('.orgchart').css('transform',''); // remove the tansform settings\n```\n\n## Browser Compatibility\n- Chrome 19+\n- Firefox 4+\n- Safari 6+\n- Opera 15+\n- IE 10+\n","funding_links":[],"categories":["Vue"],"sub_categories":["库"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/dabeng.github.io%2FOrgChart%2F","html_url":"https://awesome.ecosyste.ms/projects/dabeng.github.io%2FOrgChart%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/dabeng.github.io%2FOrgChart%2F/lists"}