1818- Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections)
1919
2020## Installation
21- Of course, you can directly use the standalone build by including dist/js/jquery.orgchart.js and dist/css/jquery.orgchart.css in your webapp.
21+ Of course, you can directly use the standalone build by including dist/js/jquery.orgchart.js and dist/css/jquery.orgchart.css in your webapp.
2222### Install with Bower
2323```
24- # From version 1.0.2 on, users can install orgchart and add it to bower.json dependencies
24+ # From version 1.0.2 on, users can install orgchart and add it to bower.json dependencies
2525$ bower install orgchart
2626```
2727
2828### Install with npm
2929```
30- # From version 1.0.4 on, users can install orgchart with npm
30+ # From version 1.0.4 on, users can install orgchart with npm
3131$ npm install orgchart
3232```
3333require('orgchart') will load orgchart plugin onto the jQuery object. The orgchart module itself does not export anything.
@@ -80,7 +80,7 @@ var datasource = {
8080 { ' name' : ' Chun Miao' , ' title' : ' department manager' }
8181 ]
8282};
83-
83+
8484$ (' #chart-container' ).orgchart ({
8585 ' data' : datasource,
8686 ' depth' : 2 ,
@@ -96,7 +96,7 @@ $('#chart-container').orgchart({
9696- ** 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 ) )
9797
9898 Top to Bottom -- default direction, as you can see all other examples on this page.
99-
99+
100100 [ Bottom to Top] ( http://dabeng.github.io/OrgChart/direction/bottom2top )
101101``` js
102102// sample of core source code
@@ -157,7 +157,7 @@ $('#chart-container').orgchart({
157157Note: 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.
158158``` js
159159// sample of core source code
160- var datascource = {
160+ var datasource = {
161161 ' id' : ' 1' ,
162162 ' name' : ' Su Miao' ,
163163 ' title' : ' department manager' ,
@@ -172,11 +172,11 @@ var ajaxURLs = {
172172 ' children' : ' /orgchart/children/' ,
173173 ' parent' : ' /orgchart/parent/' ,
174174 ' siblings' : ' /orgchart/siblings/' ,
175- ' families' : ' /orgchart/families/'
175+ ' families' : ' /orgchart/families/'
176176};
177177
178178$ (' #chart-container' ).orgchart ({
179- ' data' : datascource ,
179+ ' data' : datasource ,
180180 ' ajaxURL' : ajaxURLs,
181181 ' nodeContent' : ' title' ,
182182 ' nodeId' : ' id'
@@ -188,7 +188,7 @@ $('#chart-container').orgchart({
188188``` js
189189// sample of core source code
190190$ (' #chart-container' ).orgchart ({
191- ' data' : datascource ,
191+ ' data' : datasource ,
192192 ' depth' : 2 ,
193193 ' nodeContent' : ' title' ,
194194 ' nodeID' : ' id' ,
@@ -212,13 +212,13 @@ Here, we need the help from [html2canvas](https://github.com/niklasvh/html2canva
212212``` js
213213// sample of core source code
214214$ (' #chart-container' ).orgchart ({
215- ' data' : datascource ,
215+ ' data' : datasource ,
216216 ' depth' : 2 ,
217217 ' nodeContent' : ' title' ,
218218 ' exportButton' : true ,
219219 ' exportFilename' : ' MyOrgChart'
220220});
221- ```
221+ ```
222222![ export orgchart] ( http://dabeng.github.io/OrgChart/export-orgchart/recorder.gif )
223223
224224- ** [ I wanna itegrate organization chart with geographic information] ( http://dabeng.github.io/OrgChart/integrate-map/ ) **
@@ -249,7 +249,7 @@ var map = new ol.Map({
249249});
250250$ (' body' ).prepend (map .getViewport ());
251251
252- var datascource = {
252+ var datasource = {
253253 ' name' : ' Lao Lao' ,
254254 ' title' : ' President Office' ,
255255 ' position' : [- 87.6297980 , 41.8781140 ],
@@ -261,7 +261,7 @@ var datascource = {
261261};
262262
263263$ (' #chart-container' ).orgchart ({
264- ' data' : datascource ,
264+ ' data' : datasource ,
265265 ' nodeContent' : ' title' ,
266266 ' createNode ' : function ($node , data ) {
267267 $node .on (' click' , function () {
@@ -283,7 +283,7 @@ $('#chart-container').orgchart({
283283 });
284284 }
285285});
286- ```
286+ ```
287287![ integrate map] ( http://dabeng.github.io/OrgChart/integrate-map/recorder.gif )
288288
289289- ** [ I wanna edit orgchart] ( http://dabeng.github.io/OrgChart/edit-orgchart/ ) **
@@ -292,7 +292,7 @@ With the help of exposed core methods(addParent(), addSiblings(), addChildren(),
292292``` js
293293// sample of core source code
294294$ (' #chart-container' ).orgchart ({
295- ' data' : datascource ,
295+ ' data' : datasource ,
296296 ' exportButton' : true ,
297297 ' exportFilename' : ' SportsChart' ,
298298 ' parentNodeSymbol' : ' fa-th-large' ,
@@ -361,7 +361,7 @@ Furthermore, users can make use of option dropCriteria to inject their custom li
361361``` js
362362// sample of core source code
363363$ (' #chart-container' ).orgchart ({
364- ' data' : datascource ,
364+ ' data' : datasource ,
365365 ' nodeContent' : ' title' ,
366366 ' draggable' : true ,
367367 ' dropCriteria ' : function ($draggedNode , $dragZone , $dropZone ) {
@@ -412,7 +412,7 @@ $('#btn-export-hier').on('click', function() {
412412
413413It's a so easy task, we just need to append id or className property to node data.
414414``` js
415- var datascource = {
415+ var datasource = {
416416 ' name' : ' Lao Lao' ,
417417 ' title' : ' general manager' ,
418418 ' className' : ' top-level' ,
@@ -464,7 +464,7 @@ From now on, users never have to worry about how to align a huge of nodes in one
464464``` js
465465// sample of core source code
466466$ (' #chart-container' ).orgchart ({
467- ' data' : datascource ,
467+ ' data' : datasource ,
468468 ' nodeContent' : ' title' ,
469469 ' verticalDepth' : 3 // From the 3th level of orgchart, nodes will be aligned vertically.
470470});
@@ -477,7 +477,7 @@ $('#chart-container').orgchart({
477477### Instantiation Statement
478478``` js
479479$ (' #chartContainerId' ).orgchart (options);
480- ```
480+ ```
481481
482482### Structure of Datasource
483483``` js
@@ -488,7 +488,7 @@ $('#chartContainerId').orgchart(options);
488488 ' nodeContentPro' : ' general manager' ,
489489 ' relationship' : relationshipValue, // Note: when you activate ondemand loading nodes feature,
490490 // you should use json datsource (local or remote) and set this property.
491- // This property implies that whether this node has parent node, siblings nodes or children nodes.
491+ // This property implies that whether this node has parent node, siblings nodes or children nodes.
492492 // relationshipValue is a string composed of three "0/1" identifier.
493493 // First character stands for wether current node has parent node;
494494 // Scond character stands for wether current node has siblings nodes;
@@ -505,7 +505,7 @@ $('#chartContainerId').orgchart(options);
505505 ],
506506 ' otherPro' : anyValue
507507};
508- ```
508+ ```
509509
510510### Options
511511<table >
@@ -620,7 +620,7 @@ Removes the designated node and its descedant nodes.
620620 </tbody >
621621</table >
622622##### .orgchart('getHierarchy')
623- 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 statte of orghcart.
623+ 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.
624624
625625### Events
626626<table >
@@ -639,7 +639,7 @@ This use case is inspired by the [issue](https://github.com/dabeng/OrgChart/issu
639639
640640Users can enable/disable exapand/collapse feature with className "noncollapsable" as shown below.
641641``` js
642- $ (' .orgchart' ).addClass (' noncollapsable' ); // deactivate
642+ $ (' .orgchart' ).addClass (' noncollapsable' ); // deactivate
643643
644644$ (' .orgchart' ).removeClass (' noncollapsable' ); // activate
645645```
0 commit comments