Skip to content

Commit

Permalink
update readme doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@dabeng
dabeng committed Dec 16, 2023
1 parent 85d145f commit 9241b3d
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 50 deletions.
84 changes: 67 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,11 @@ $ 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)
## [Demos based on nested table](https://codepen.io/collection/AWxGVb/) (obsolete)

### 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 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)

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

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

**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](https://dabeng.github.io/OrgChart/option-createNode.html)

Expand Down Expand Up @@ -249,10 +251,10 @@ var oc = $('#chartContainerId').orgchart(options);
<tbody>
<tr>
<td>data</td>
<td>json</td>
<td>json or jquery object</td>
<td>yes</td>
<td></td>
<td>datasource usded to build out structure of orgchart. It should be a json object.</td>
<td>datasource usded to build out structure of orgchart. It could be a json object or a jquery object(ul element)</td>
</tr>
<tr>
<td>pan</td>
Expand Down Expand Up @@ -303,13 +305,6 @@ var oc = $('#chartContainerId').orgchart(options);
<td>false</td>
<td>Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.</td>
</tr>
<tr>
<td>ajaxURL</td>
<td>json</td>
<td>no</td>
<td></td>
<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>
</tr>
<tr>
<td>visibleLevel</td>
<td>positive integer</td>
Expand Down Expand Up @@ -456,6 +451,66 @@ Embeds an organization chart in designated container. Accepts an options object
#### init(newOptions)
It's the useful way when users want to re-initialize or refresh orgchart based on new options or reload new data.

#### addAncestors(data, parentId)
Adds the ancestors for current orgchart.
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>json</td>
<td>yes</td>
<td></td>
<td>datasource for building ancestors</td>
</tr>
<tr>
<td>parentId</td>
<td>string</td>
<td>yes</td>
<td></td>
<td>append current orgchart to the parent node with parentId</td>
</tr>
</tbody>
</table>

#### addDescendants(data, $parent)
Adds the descendants for specified parent node.
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>array</td>
<td>yes</td>
<td></td>
<td>datasource for building descendants</td>
</tr>
<tr>
<td>$parent</td>
<td>jquery object</td>
<td>yes</td>
<td></td>
<td>append descendants to the $parent node</td>
</tr>
</tbody>
</table>

#### addParent(data)
Adds parent node(actullay it's always root node) for current orgchart.
<table>
Expand Down Expand Up @@ -898,11 +953,6 @@ This method allow you to export current orgchart as png or pdf file.
<td>chart</td>
<td>Initialisation complete event - fired when Organization Chart has been fully initialised and data loaded.</td>
</tr>
<tr>
<td>load-[relation].orgchart</td>
<td></td>
<td>This event is fired on a node after the onDemand loading completes.<b>[relation]</b> can be either parent, children or siblings.</td>
</tr>
<tr>
<td>show-[relation].orgchart</td>
<td></td>
Expand Down
84 changes: 67 additions & 17 deletions README.zh-cn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ $ npm install orgchart
`require('orgchart')`会把orgchart插件追加到jQuery对象上。orgchart模块本身并不导出任何东西。

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

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

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

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

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

![ondemand-loading-data](http://dabeng.github.io/OrgChart/img/ondemand-loading-data.gif)

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

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

#### addAncestors(data, parentId)
为当前的组织结构图增加祖先节点，可以不止一个层级。
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>json</td>
<td>是</td>
<td></td>
<td>用于构造祖先节点的数据源</td>
</tr>
<tr>
<td>parentId</td>
<td>string</td>
<td>yes</td>
<td></td>
<td>将当前的组织结构图追加到某一个祖先节点里，该节点的id</td>
</tr>
</tbody>
</table>

#### addDescendants(data, $parent)
为指定的父节点增加后代节点。
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>array</td>
<td>yes</td>
<td></td>
<td>用于构造后代节点的数据源</td>
</tr>
<tr>
<td>$parent</td>
<td>jquery object</td>
<td>yes</td>
<td></td>
<td>后代节点要追加到的父节点对象</td>
</tr>
</tbody>
</table>

#### addParent(data)
Adds parent node(actullay it's always root node) for current orgchart.
为当前的组织结构图增加父节点。
<table>
<thead>
<tr>
Expand Down Expand Up @@ -758,11 +813,6 @@ Adds parent node(actullay it's always root node) for current orgchart.
<td>chart</td>
<td>当组织结构图初始化完成时，该事件触发。在响应事件处理器中，你可以访问到渲染出的任意节点。</td>
</tr>
<tr>
<td>load-[relation].orgchart</td>
<td></td>
<td>在按需请求数据场景中，每次载入新节点后，触发该事件。<b>[relation]</b>的可选值是parent, children, siblings。</td>
</tr>
<tr>
<td>show-[relation].orgchart</td>
<td></td>
Expand Down
82 changes: 66 additions & 16 deletions README.zh-tw.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ $ npm install orgchart
`require('orgchart')`會把orgchart插件追加到jQuery對象上。orgchart模塊本身並不導出任何東西。

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

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

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

![ondemand-loading-data](http://dabeng.github.io/OrgChart/img/ondemand-loading-data.gif)

- [我想定制組織結構圖中節點內的結構](https://dabeng.github.io/OrgChart/option-createNode.html)

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

#### addAncestors(data, parentId)
爲當前的組織結構圖增加祖先節點，可以不止壹個層級。
<table>
<thead>
<tr>
<th>名稱</th>
<th>類型</th>
<th>必填</th>
<th>默認值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>json</td>
<td>是</td>
<td></td>
<td>用于構造祖先節點的數據源</td>
</tr>
<tr>
<td>parentId</td>
<td>string</td>
<td>yes</td>
<td></td>
<td>將當前的組織結構圖追加到某壹個祖先節點裏，該節點的id</td>
</tr>
</tbody>
</table>

#### addDescendants(data, $parent)
爲指定的父節點增加後代節點。
<table>
<thead>
<tr>
<th>名稱</th>
<th>類型</th>
<th>必填</th>
<th>默認值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>array</td>
<td>yes</td>
<td></td>
<td>用于構造後代節點的數據源</td>
</tr>
<tr>
<td>$parent</td>
<td>jquery object</td>
<td>yes</td>
<td></td>
<td>後代節點要追加到的父節點對象</td>
</tr>
</tbody>
</table>

#### addParent(data)
Adds parent node(actullay it's always root node) for current orgchart.
爲當前的組織結構圖增加父節點。
<table>
<thead>
<tr>
Expand Down Expand Up @@ -758,11 +813,6 @@ Adds parent node(actullay it's always root node) for current orgchart.
<td>chart</td>
<td>當組織結構圖初始化完成時，該事件觸發。在響應事件處理器中，你可以訪問到渲染出的任意節點。</td>
</tr>
<tr>
<td>load-[relation].orgchart</td>
<td></td>
<td>在按需請求數據場景中，每次載入新節點後，觸發該事件。<b>[relation]</b>的可選值是parent, children, siblings。</td>
</tr>
<tr>
<td>show-[relation].orgchart</td>
<td></td>
Expand Down

0 comments on commit 9241b3d

Please sign in to comment.