diff --git a/README.md b/README.md index 58f910a..1eed1e6 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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) @@ -249,10 +251,10 @@ var oc = $('#chartContainerId').orgchart(options); data - json + json or jquery object yes - datasource usded to build out structure of orgchart. It should be a json object. + datasource usded to build out structure of orgchart. It could be a json object or a jquery object(ul element) pan @@ -303,13 +305,6 @@ var oc = $('#chartContainerId').orgchart(options); false Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow. - - ajaxURL - json - no - - 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. - visibleLevel positive integer @@ -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. + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDefaultDescription
datajsonyesdatasource for building ancestors
parentIdstringyesappend current orgchart to the parent node with parentId
+ +#### addDescendants(data, $parent) +Adds the descendants for specified parent node. + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDefaultDescription
dataarrayyesdatasource for building descendants
$parentjquery objectyesappend descendants to the $parent node
+ #### addParent(data) Adds parent node(actullay it's always root node) for current orgchart. @@ -898,11 +953,6 @@ This method allow you to export current orgchart as png or pdf file. - - - - - diff --git a/README.zh-cn.md b/README.zh-cn.md index fd0207e..7a9512d 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -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) @@ -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) @@ -185,10 +187,10 @@ var oc = $('#chartContainerId').orgchart(options); - + - + @@ -239,13 +241,6 @@ var oc = $('#chartContainerId').orgchart(options); - - - - - - - @@ -363,8 +358,68 @@ var oc = $('#chartContainerId').orgchart(options); #### init(newOptions) 当你想基于新的options或数据源刷新组织结构图时，这个方法就派上用场了。 +#### addAncestors(data, parentId) +为当前的组织结构图增加祖先节点，可以不止一个层级。 +
chart Initialisation complete event - fired when Organization Chart has been fully initialised and data loaded.
load-[relation].orgchartThis event is fired on a node after the onDemand loading completes.[relation] can be either parent, children or siblings.
show-[relation].orgchart
datajson / stringjson / jquery object 是 用于构造组织结构图的数据源。它的值可以是JSON或代表ajax请求地址的字符串。用于构造组织结构图的数据源。它的值可以是JSON或能提供数据的ul元素。
panfalse 启动该选项，用户点击了节点的两侧箭头按钮时，会展开/折叠一侧的兄弟节点；默认的行为是用户点击了节点任何一侧的箭头按钮，都会折叠起所有的兄弟节点，不区分左右。
ajaxURLjson否该选项下面又包括了4个子选项--parent, children, siblings, families（请求父节点及兄弟节点）。顾名思义，不同的子选项代表了请求不同类型的节点时对应的URL地址
visibleLevel positive integer
+ + + + + + + + + + + + + + + + + + + + + + + + + +
名称类型必填默认值描述
datajson是用于构造祖先节点的数据源
parentIdstringyes将当前的组织结构图追加到某一个祖先节点里，该节点的id
+ +#### addDescendants(data, $parent) +为指定的父节点增加后代节点。 + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称类型必填默认值描述
dataarrayyes用于构造后代节点的数据源
$parentjquery objectyes后代节点要追加到的父节点对象
+ #### addParent(data) -Adds parent node(actullay it's always root node) for current orgchart. +为当前的组织结构图增加父节点。 @@ -758,11 +813,6 @@ Adds parent node(actullay it's always root node) for current orgchart. - - - - - diff --git a/README.zh-tw.md b/README.zh-tw.md index 4265227..0150d00 100644 --- a/README.zh-tw.md +++ b/README.zh-tw.md @@ -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)) @@ -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) @@ -185,10 +187,10 @@ var oc = $('#chartContainerId').orgchart(options); - + - + @@ -239,13 +241,6 @@ var oc = $('#chartContainerId').orgchart(options); - - - - - - - @@ -363,8 +358,68 @@ var oc = $('#chartContainerId').orgchart(options); #### init(newOptions) 當你想基于新的options或數據源刷新組織結構圖時，這個方法就派上用場了。 +#### addAncestors(data, parentId) +爲當前的組織結構圖增加祖先節點，可以不止壹個層級。 +
chart 当组织结构图初始化完成时，该事件触发。在响应事件处理器中，你可以访问到渲染出的任意节点。
load-[relation].orgchart在按需请求数据场景中，每次载入新节点后，触发该事件。[relation]的可选值是parent, children, siblings。
show-[relation].orgchart
datajson / stringjson / jquery object 是 用于構造組織結構圖的數據源。它的值可以是JSON或代表ajax請求地址的字符串。用于構造組織結構圖的數據源。它的值可以是JSON或能提供數據的ul元素。
panfalse 啓動該選項，用戶點擊了節點的兩側箭頭按鈕時，會展開/折疊一側的兄弟節點；默認的行爲是用戶點擊了節點任何一側的箭頭按鈕，都會折疊起所有的兄弟節點，不區分左右。
ajaxURLjson否該選項下面又包括了4個子選項--parent, children, siblings, families（請求父節點及兄弟節點）。顧名思義，不同的子選項代表了請求不同類型的節點時對應的URL地址
visibleLevel positive integer
+ + + + + + + + + + + + + + + + + + + + + + + + + +
名稱類型必填默認值描述
datajson是用于構造祖先節點的數據源
parentIdstringyes將當前的組織結構圖追加到某壹個祖先節點裏，該節點的id
+ +#### addDescendants(data, $parent) +爲指定的父節點增加後代節點。 + + + + + + + + + + + + + + + + + + + + + + + + + + +
名稱類型必填默認值描述
dataarrayyes用于構造後代節點的數據源
$parentjquery objectyes後代節點要追加到的父節點對象
+ #### addParent(data) -Adds parent node(actullay it's always root node) for current orgchart. +爲當前的組織結構圖增加父節點。 @@ -758,11 +813,6 @@ Adds parent node(actullay it's always root node) for current orgchart. - - - - -
chart 當組織結構圖初始化完成時，該事件觸發。在響應事件處理器中，你可以訪問到渲染出的任意節點。
load-[relation].orgchart在按需請求數據場景中，每次載入新節點後，觸發該事件。[relation]的可選值是parent, children, siblings。
show-[relation].orgchart