OrgChart 使用教程 （一）

没用开场白…
近日来，公司要求做一份web组织架构图，正好我使用的框架是vue ，自己写太麻烦，于是找一找有没有合适的组件，直接套用。
于是找到了 OrgChart 这个 开源的组织架构平台
很不巧啊！官网的网络访问不了，有些案例图无法加载出来！！
这让我一个二流子英语的业余选手很苦恼啊！！
于是我开始扒源码，英文注释什么的百度翻译，然后写这篇博文记录一下，如果有合适的效果，也不容易忘，吼吼！

开篇

官网上的案例 用vue的很明确了，这个自行导入吧

然后可以看到 它定义了一个 oc 的方法 然后在生命周期挂载后，用vue自带的this.refs API 将dom元素传参进去 ，同时传进去了一个配置项参数

this.chart = new OrgChart(domEl, {nodes: x,nodeBinding: {ield_0: "name",field_1: "title",img_0: "img"
}
});

配置项详解:

1. lazyLoading : boolean

延迟加载是一种在页面加载时延迟非关键节点加载的技术。相反，这些非关键节点是在需要时加载的。
默认值 true

2. enableSearch ： boolean

是否启用高级搜索
上面的搜索框

3. orientation：OrgChart.orientation.top

简单理解方向 可选值如下：默认值为OrgChart.orientation.top

• OrgChart.orientation.top
• OrgChart.orientation.bottom
• OrgChart.orientation.right
• OrgChart.orientation.left
• OrgChart.orientation.top_left
• OrgChart.orientation.bottom_left
• OrgChart.orientation.right_top
• OrgChart.orientation.left_top

4. mouseScrool ：OrgChart.action.zoom

设置操作 可以接受以下的值

• OrgChart.action.zoom - will zoom in/out on mouse scroll 鼠标支持放大缩小
• OrgChart.action.xScroll - left/right move of the chart on mouse scroll 支持左右滑窗
• OrgChart.action.yScroll - up/down move of the chart on mouse scroll 支持上下滑窗
• OrgChart.action.none - do nothing on mouse scroll 什么都不支持，只能脱拽

5. nodeBinding：Object

组织结构图JS中的节点绑定将节点数据映射到节点模板参数。

var chart = new OrgChart(document.getElementById("orgchart"), {nodeBinding: {field_0: "name" },nodes: [{ id: 1, name: "Amber McKenzie" },{ id: 2, pid: 1, name: "Ava Field" },{ id: 3, pid: 1, name: "Peter Stevens" }]});

在上面的示例中，字段名将从模板中变为字段0。
也可以在模板中定义自己的字段，有关更多信息，请访问网站上的字段页面。

6. enableDragDrop: boolean

借助组织结构图的拖放功能，可以轻松地移动节点。

var chart = new OrgChart(document.getElementById("tree"), {enableDragDrop: true,});

这个功能牛了

7. enableTouch: boolean

是否启动触摸

8. nodeMenu: Menu

启动编辑 新增 删除 等功能

 nodeMenu:{details: {text:"Details"},edit: {text:"Edit"},add: {text:"Add"},remove: {text:"Remove"}       },

9. nodeContextMenu: Menu

这个和上面的一起比较， nodeMenu有三个小点，这个在鼠标右键 ，用法同上

 nodeContextMenu:{details: {text:"Details"},edit: {text:"Edit"},add: {text:"Add"},remove: {text:"Remove"}       },

10. dragDropMenu: Menu

使用带有拖放和分组功能的dragDropMenu。
这个我也不知道效果是啥，还是搭配使用？有高人指点嘛

  var chart = new OrgChart(document.getElementById("tree"), {dragDropMenu: {addInGroup: { text: "Add in group" },addAsChild: { text: "Add as child" }},});

11. menu: Menu

支持导出到excel、导出到svg和其他组织结构图操作。
还可以定义自己的组织结构图操作。
有关更多信息，请参阅组织结构图.ImportFormCSV

12. toolbar: Object

工具栏是一组图标或按钮。

   var chart = new OrgChart(document.getElementById("tree"), {toolbar: {layout: true,zoom: true,fit: true,expandAll: false},...}); 

效果是：在右下角显示工具，这个画风我笑了 …gei gei gei

13. sticky: boolean

移动组织结构图后，停止将其锁定到屏幕顶部。
默认值 true
没什么效果 好像跟某个配置冲突吧 没去研究

14. nodeMouseClick: OrgChart.action.details

可以使用的值

• OrgChart.action.edit 将打开右侧单击的节点的编辑视图
• OrgChart.action.details 将打开右侧单击的节点的详细信息视图，详细信息是只读的。
• OrgChart.action.expandCollapse 将展开或折叠子节点
• OrgChart.action.none 对节点单击事件不执行任何操作

15. showXScroll: OrgChart.scroll.none

OrgChart.scroll.visible 显示水平滚动条

16. showYScroll: OrgChart.scroll.none

OrgChart.scroll.visible 显示垂直滚动条

17. template: string

换主题，一共这些预设主题

• ana
• ula
• olivia
• belinda
• rony
• mery
• polina
• mila
• diva
• luba
• derek
• base
• deborah

18. tags: Tags

使用标签选项，您可以：
为标记节点设置特定模板
设置标记节点的默认状态（展开/折叠）
为标记的节点定义组
将节点设置为标记节点的助手
为标记节点设置节点菜单项

//为标记节点设置特定模板。有关详细信息，请参阅一个图表中的多个模板。
var chart = new OrgChart(document.getElementById("tree"), {tags: {Management: {template: "rony"}},     nodes: [{ id: 1, tags: ["Management"] },        ]});
//设置标记节点的默认状态（展开/折叠）。有关详细信息，请参见展开/折叠。
var chart = new OrgChart(document.getElementById("tree"), {tags: {hide: {state: OrgChart.COLLAPSE}},nodes: [{ id: "1" },{ id: "2", tags: ["hide"] },{ id: "3" }]});//为标记的节点定义组。有关详细信息，请参见分组。var chart = new OrgChart(document.getElementById("tree"), {tags: {HRs: {group: true,groupName: "HR Team",groupState: OrgChart.EXPAND,template: "group_grey"}},nodes: [{ id: 1, tags: ["HRs"] }]});    //将节点设置为标记节点的助手。详见助手。var chart = new OrgChart(document.getElementById("tree"), {tags: {assistant: {template: "mery"}},nodes: [{ id: 1, tags: ["assistant"] }]}); // 为标记的节点设置节点菜单项。有关详细信息，请参见节点菜单项。  var chart = new OrgChart(document.getElementById("tree"), {tags: customMenuItems: {nodeMenu: {add: { text: "Add New" }}}},});   

19. linkBinding: Object

组织结构图JS中的链接绑定将节点数据映射到链接模板参数。
就是在线中 有个注释

  var chart = new OrgChart(document.getElementById("tree"), {linkBinding: {link_field_0: "createdAt"},nodes: [{ id: "1", name: "Amber McKenzie"  },{ id: "2", pid: "1", createdAt: "Since 08/08/2018" },{ id: "3", pid: "1", createdAt: "Since 05/04/2018" }]}); 

20. searchFields: Array string

按字段类型进行搜索

 var chart = new OrgChart(document.getElementById("tree"), {searchFields: ["name", "title", etc...],...}); 

21. nodes: Array string

节点数据JSON对象的数组。节点选项是图表的数据源。

var chart = new OrgChart(document.getElementById("tree"), {...nodes: [{ id: "1" },{ id: "2", pid: "1" },{ id: "3", pid: "1", tags: ["Sales"] }]}); 

22. clinks: Array string

Add C link 添加辅助线 实线

  var chart = new OrgChart(document.getElementById('tree'), {clinks: [{from: 4, to: 0, label: 'text'}, {from: 4, to: 5, template: 'blue', label: '4 reports to 5' },{from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' },]   ...});

23. slinks: Array string

Add S link 添加辅助线 虚线

     var chart = new OrgChart(document.getElementById('tree'), {slinks: [{from: 4, to: 0, label: 'text'}, {from: 4, to: 5, template: 'blue', label: 'reports to' },{from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' },]   ...});

24. levelSeparation: number

每个级别之间的差距 默认60

 var chart = new OrgChart(document.getElementById("tree"), {...levelSeparation: 50});

25. siblingSeparation :number,

子树中节点之间的间距。 默认20

var chart = new OrgChart(document.getElementById("tree"), {...siblingSeparation: 50});  

26. subtreeSeparation: number,

子树之间的间隙,默认40

 var chart = new OrgChart(document.getElementById("tree"), {...subtreeSeparation: 50}); 

27. mixedHierarchyNodesSeparation: number

垂直布局中节点之间的间距。

 var chart = new OrgChart(document.getElementById("tree"), {...mixedHierarchyNodesSeparation: 5}); 

28. padding: number

填充选项在组织结构图的所有四个边上设置填充区域

 var chart = new OrgChart(document.getElementById("tree"), {...padding: 20});  

29. padding: number

• OrgChart.normal
• OrgChart.mixed
• OrgChart.tree
• OrgChart.treeLeftOffset
• OrgChart.treeRightOffset