Skip to content

Commit 9241b3d

Browse files
dabengdabeng
committed
update readme doc
1 parent 85d145f commit 9241b3d

File tree

3 files changed

+200
-50
lines changed

3 files changed

+200
-50
lines changed

‎README.md‎

Lines changed: 67 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,11 @@ $ npm install orgchart
4545
require('orgchart') will load orgchart plugin onto the jQuery object. The orgchart module itself does not export anything.
4646

4747
## [Demos on github pages](https://dabeng.github.io/OrgChart/)
48-
## [Demos based on nested table](https://codepen.io/collection/AWxGVb/)
4948
## [Demos based on nested ul](https://codepen.io/collection/nWqvzY)
49+
## [Demos based on nested table](https://codepen.io/collection/AWxGVb/) (obsolete)
5050

5151
### online demos
52-
- [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))
52+
- [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))
5353

5454
- [using local datasource](https://dabeng.github.io/OrgChart/local-datasource.html)
5555

@@ -71,7 +71,9 @@ require('orgchart') will load orgchart plugin onto the jQuery object. The orgcha
7171

7272
- [I wanna load data on-demand](https://dabeng.github.io/OrgChart/ondemand-loading-data.html)
7373

74-
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.
74+
![ondemand-loading-data](http://dabeng.github.io/OrgChart/img/ondemand-loading-data.gif)
75+
76+
**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.
7577

7678
- [I wanna customize the structure of node](https://dabeng.github.io/OrgChart/option-createNode.html)
7779

@@ -249,10 +251,10 @@ var oc = $('#chartContainerId').orgchart(options);
249251
<tbody>
250252
<tr>
251253
<td>data</td>
252-
<td>json</td>
254+
<td>json or jquery object</td>
253255
<td>yes</td>
254256
<td></td>
255-
<td>datasource usded to build out structure of orgchart. It should be a json object.</td>
257+
<td>datasource usded to build out structure of orgchart. It could be a json object or a jquery object(ul element)</td>
256258
</tr>
257259
<tr>
258260
<td>pan</td>
@@ -303,13 +305,6 @@ var oc = $('#chartContainerId').orgchart(options);
303305
<td>false</td>
304306
<td>Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.</td>
305307
</tr>
306-
<tr>
307-
<td>ajaxURL</td>
308-
<td>json</td>
309-
<td>no</td>
310-
<td></td>
311-
<td>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.</td>
312-
</tr>
313308
<tr>
314309
<td>visibleLevel</td>
315310
<td>positive integer</td>
@@ -456,6 +451,66 @@ Embeds an organization chart in designated container. Accepts an options object
456451
#### init(newOptions)
457452
It's the useful way when users want to re-initialize or refresh orgchart based on new options or reload new data.
458453

454+
#### addAncestors(data, parentId)
455+
Adds the ancestors for current orgchart.
456+
<table>
457+
<thead>
458+
<tr>
459+
<th>Name</th>
460+
<th>Type</th>
461+
<th>Required</th>
462+
<th>Default</th>
463+
<th>Description</th>
464+
</tr>
465+
</thead>
466+
<tbody>
467+
<tr>
468+
<td>data</td>
469+
<td>json</td>
470+
<td>yes</td>
471+
<td></td>
472+
<td>datasource for building ancestors</td>
473+
</tr>
474+
<tr>
475+
<td>parentId</td>
476+
<td>string</td>
477+
<td>yes</td>
478+
<td></td>
479+
<td>append current orgchart to the parent node with parentId</td>
480+
</tr>
481+
</tbody>
482+
</table>
483+
484+
#### addDescendants(data, $parent)
485+
Adds the descendants for specified parent node.
486+
<table>
487+
<thead>
488+
<tr>
489+
<th>Name</th>
490+
<th>Type</th>
491+
<th>Required</th>
492+
<th>Default</th>
493+
<th>Description</th>
494+
</tr>
495+
</thead>
496+
<tbody>
497+
<tr>
498+
<td>data</td>
499+
<td>array</td>
500+
<td>yes</td>
501+
<td></td>
502+
<td>datasource for building descendants</td>
503+
</tr>
504+
<tr>
505+
<td>$parent</td>
506+
<td>jquery object</td>
507+
<td>yes</td>
508+
<td></td>
509+
<td>append descendants to the $parent node</td>
510+
</tr>
511+
</tbody>
512+
</table>
513+
459514
#### addParent(data)
460515
Adds parent node(actullay it's always root node) for current orgchart.
461516
<table>
@@ -898,11 +953,6 @@ This method allow you to export current orgchart as png or pdf file.
898953
<td>chart</td>
899954
<td>Initialisation complete event - fired when Organization Chart has been fully initialised and data loaded.</td>
900955
</tr>
901-
<tr>
902-
<td>load-[relation].orgchart</td>
903-
<td></td>
904-
<td>This event is fired on a node after the onDemand loading completes.<b>[relation]</b> can be either parent, children or siblings.</td>
905-
</tr>
906956
<tr>
907957
<td>show-[relation].orgchart</td>
908958
<td></td>

‎README.zh-cn.md‎

Lines changed: 67 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ $ npm install orgchart
4343
`require('orgchart')`会把orgchart插件追加到jQuery对象上。orgchart模块本身并不导出任何东西。
4444

4545
## [gihtub pages实例集合](https://dabeng.github.io/OrgChart/)
46-
## [基于嵌套table的实例集合](https://codepen.io/collection/AWxGVb/)
4746
## [基于嵌套ul的实例集合](https://codepen.io/collection/nWqvzY)
47+
## [基于嵌套table的实例集合](https://codepen.io/collection/AWxGVb/) (过时)
4848

4949
### 天马行空的需求
50-
- [ul数据源](https://dabeng.github.io/OrgChart/ul-datasource.html)(感谢 [Tobyee的好点子:blush:](https://github.com/dabeng/OrgChart/issues/1))
50+
- [ul数据源](https://dabeng.github.io/OrgChart/ul-datasource.html)(感谢 [Tobyee的好点子 :blush:](https://github.com/dabeng/OrgChart/issues/1))
5151

5252
- [本地数据源](https://dabeng.github.io/OrgChart/local-datasource.html)
5353

@@ -68,6 +68,8 @@ $ npm install orgchart
6868
- [我想通过ajax请求获得远程数据源，然后构造组织结构图](https://dabeng.github.io/OrgChart/ajax-datasource.html)
6969

7070
- [我想按需载入数据源，进而渲染不同的组织结构图](https://dabeng.github.io/OrgChart/ondemand-loading-data.html)
71+
72+
![ondemand-loading-data](http://dabeng.github.io/OrgChart/img/ondemand-loading-data.gif)
7173

7274
- [我想定制组织结构图中节点内的结构](https://dabeng.github.io/OrgChart/option-createNode.html)
7375

@@ -185,10 +187,10 @@ var oc = $('#chartContainerId').orgchart(options);
185187
<tbody>
186188
<tr>
187189
<td>data</td>
188-
<td>json / string</td>
190+
<td>json / jquery object</td>
189191
<td>是</td>
190192
<td></td>
191-
<td>用于构造组织结构图的数据源。它的值可以是JSON或代表ajax请求地址的字符串。</td>
193+
<td>用于构造组织结构图的数据源。它的值可以是JSON或能提供数据的ul元素。</td>
192194
</tr>
193195
<tr>
194196
<td>pan</td>
@@ -239,13 +241,6 @@ var oc = $('#chartContainerId').orgchart(options);
239241
<td>false</td>
240242
<td>启动该选项，用户点击了节点的两侧箭头按钮时，会展开/折叠一侧的兄弟节点；默认的行为是用户点击了节点任何一侧的箭头按钮，都会折叠起所有的兄弟节点，不区分左右。</td>
241243
</tr>
242-
<tr>
243-
<td>ajaxURL</td>
244-
<td>json</td>
245-
<td>否</td>
246-
<td></td>
247-
<td>该选项下面又包括了4个子选项--parent, children, siblings, families（请求父节点及兄弟节点）。顾名思义，不同的子选项代表了请求不同类型的节点时对应的URL地址</td>
248-
</tr>
249244
<tr>
250245
<td>visibleLevel</td>
251246
<td>positive integer</td>
@@ -363,8 +358,68 @@ var oc = $('#chartContainerId').orgchart(options);
363358
#### init(newOptions)
364359
当你想基于新的options或数据源刷新组织结构图时，这个方法就派上用场了。
365360

361+
#### addAncestors(data, parentId)
362+
为当前的组织结构图增加祖先节点，可以不止一个层级。
363+
<table>
364+
<thead>
365+
<tr>
366+
<th>名称</th>
367+
<th>类型</th>
368+
<th>必填</th>
369+
<th>默认值</th>
370+
<th>描述</th>
371+
</tr>
372+
</thead>
373+
<tbody>
374+
<tr>
375+
<td>data</td>
376+
<td>json</td>
377+
<td>是</td>
378+
<td></td>
379+
<td>用于构造祖先节点的数据源</td>
380+
</tr>
381+
<tr>
382+
<td>parentId</td>
383+
<td>string</td>
384+
<td>yes</td>
385+
<td></td>
386+
<td>将当前的组织结构图追加到某一个祖先节点里，该节点的id</td>
387+
</tr>
388+
</tbody>
389+
</table>
390+
391+
#### addDescendants(data, $parent)
392+
为指定的父节点增加后代节点。
393+
<table>
394+
<thead>
395+
<tr>
396+
<th>名称</th>
397+
<th>类型</th>
398+
<th>必填</th>
399+
<th>默认值</th>
400+
<th>描述</th>
401+
</tr>
402+
</thead>
403+
<tbody>
404+
<tr>
405+
<td>data</td>
406+
<td>array</td>
407+
<td>yes</td>
408+
<td></td>
409+
<td>用于构造后代节点的数据源</td>
410+
</tr>
411+
<tr>
412+
<td>$parent</td>
413+
<td>jquery object</td>
414+
<td>yes</td>
415+
<td></td>
416+
<td>后代节点要追加到的父节点对象</td>
417+
</tr>
418+
</tbody>
419+
</table>
420+
366421
#### addParent(data)
367-
Adds parent node(actullay it's always root node) for current orgchart.
422+
为当前的组织结构图增加父节点。
368423
<table>
369424
<thead>
370425
<tr>
@@ -758,11 +813,6 @@ Adds parent node(actullay it's always root node) for current orgchart.
758813
<td>chart</td>
759814
<td>当组织结构图初始化完成时，该事件触发。在响应事件处理器中，你可以访问到渲染出的任意节点。</td>
760815
</tr>
761-
<tr>
762-
<td>load-[relation].orgchart</td>
763-
<td></td>
764-
<td>在按需请求数据场景中，每次载入新节点后，触发该事件。<b>[relation]</b>的可选值是parent, children, siblings。</td>
765-
</tr>
766816
<tr>
767817
<td>show-[relation].orgchart</td>
768818
<td></td>

‎README.zh-tw.md‎

Lines changed: 66 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ $ npm install orgchart
4343
`require('orgchart')`會把orgchart插件追加到jQuery對象上。orgchart模塊本身並不導出任何東西。
4444

4545
## [gihtub pages實例集合](https://dabeng.github.io/OrgChart/)
46-
## [基于嵌套table的實例集合](https://codepen.io/collection/AWxGVb/)
4746
## [基于嵌套ul的實例集合](https://codepen.io/collection/nWqvzY)
47+
## [基于嵌套table的實例集合](https://codepen.io/collection/AWxGVb/) (過時)
4848

4949
### 天馬行空的需求
5050
- [ul數據源](https://dabeng.github.io/OrgChart/ul-datasource.html)(感謝 [Tobyee的好點子:blush:](https://github.com/dabeng/OrgChart/issues/1))
@@ -69,6 +69,8 @@ $ npm install orgchart
6969

7070
- [我想按需載入數據源，進而渲染不同的組織結構圖](https://dabeng.github.io/OrgChart/ondemand-loading-data.html)
7171

72+
![ondemand-loading-data](http://dabeng.github.io/OrgChart/img/ondemand-loading-data.gif)
73+
7274
- [我想定制組織結構圖中節點內的結構](https://dabeng.github.io/OrgChart/option-createNode.html)
7375

7476
- [我想把組織結構圖導出成一個圖片](https://dabeng.github.io/OrgChart/export-chart.html)
@@ -185,10 +187,10 @@ var oc = $('#chartContainerId').orgchart(options);
185187
<tbody>
186188
<tr>
187189
<td>data</td>
188-
<td>json / string</td>
190+
<td>json / jquery object</td>
189191
<td>是</td>
190192
<td></td>
191-
<td>用于構造組織結構圖的數據源。它的值可以是JSON或代表ajax請求地址的字符串。</td>
193+
<td>用于構造組織結構圖的數據源。它的值可以是JSON或能提供數據的ul元素。</td>
192194
</tr>
193195
<tr>
194196
<td>pan</td>
@@ -239,13 +241,6 @@ var oc = $('#chartContainerId').orgchart(options);
239241
<td>false</td>
240242
<td>啓動該選項，用戶點擊了節點的兩側箭頭按鈕時，會展開/折疊一側的兄弟節點；默認的行爲是用戶點擊了節點任何一側的箭頭按鈕，都會折疊起所有的兄弟節點，不區分左右。</td>
241243
</tr>
242-
<tr>
243-
<td>ajaxURL</td>
244-
<td>json</td>
245-
<td>否</td>
246-
<td></td>
247-
<td>該選項下面又包括了4個子選項--parent, children, siblings, families（請求父節點及兄弟節點）。顧名思義，不同的子選項代表了請求不同類型的節點時對應的URL地址</td>
248-
</tr>
249244
<tr>
250245
<td>visibleLevel</td>
251246
<td>positive integer</td>
@@ -363,8 +358,68 @@ var oc = $('#chartContainerId').orgchart(options);
363358
#### init(newOptions)
364359
當你想基于新的options或數據源刷新組織結構圖時，這個方法就派上用場了。
365360

361+
#### addAncestors(data, parentId)
362+
爲當前的組織結構圖增加祖先節點，可以不止壹個層級。
363+
<table>
364+
<thead>
365+
<tr>
366+
<th>名稱</th>
367+
<th>類型</th>
368+
<th>必填</th>
369+
<th>默認值</th>
370+
<th>描述</th>
371+
</tr>
372+
</thead>
373+
<tbody>
374+
<tr>
375+
<td>data</td>
376+
<td>json</td>
377+
<td>是</td>
378+
<td></td>
379+
<td>用于構造祖先節點的數據源</td>
380+
</tr>
381+
<tr>
382+
<td>parentId</td>
383+
<td>string</td>
384+
<td>yes</td>
385+
<td></td>
386+
<td>將當前的組織結構圖追加到某壹個祖先節點裏，該節點的id</td>
387+
</tr>
388+
</tbody>
389+
</table>
390+
391+
#### addDescendants(data, $parent)
392+
爲指定的父節點增加後代節點。
393+
<table>
394+
<thead>
395+
<tr>
396+
<th>名稱</th>
397+
<th>類型</th>
398+
<th>必填</th>
399+
<th>默認值</th>
400+
<th>描述</th>
401+
</tr>
402+
</thead>
403+
<tbody>
404+
<tr>
405+
<td>data</td>
406+
<td>array</td>
407+
<td>yes</td>
408+
<td></td>
409+
<td>用于構造後代節點的數據源</td>
410+
</tr>
411+
<tr>
412+
<td>$parent</td>
413+
<td>jquery object</td>
414+
<td>yes</td>
415+
<td></td>
416+
<td>後代節點要追加到的父節點對象</td>
417+
</tr>
418+
</tbody>
419+
</table>
420+
366421
#### addParent(data)
367-
Adds parent node(actullay it's always root node) for current orgchart.
422+
爲當前的組織結構圖增加父節點。
368423
<table>
369424
<thead>
370425
<tr>
@@ -758,11 +813,6 @@ Adds parent node(actullay it's always root node) for current orgchart.
758813
<td>chart</td>
759814
<td>當組織結構圖初始化完成時，該事件觸發。在響應事件處理器中，你可以訪問到渲染出的任意節點。</td>
760815
</tr>
761-
<tr>
762-
<td>load-[relation].orgchart</td>
763-
<td></td>
764-
<td>在按需請求數據場景中，每次載入新節點後，觸發該事件。<b>[relation]</b>的可選值是parent, children, siblings。</td>
765-
</tr>
766816
<tr>
767817
<td>show-[relation].orgchart</td>
768818
<td></td>

0 commit comments

Comments
 (0)