最近一个项目里有个前端绘制家谱图的需求, 大概是下面这个样子:
点击节点会弹出操作菜单, 实现增删改查等操作, 查阅网上资料发现, 现有案例基本都是基于 orgchart 这个 jQuery 插件实现的, 我们的项目是基于 vue 的, 不希望因为这个功能引入 jQuery, 所以就基于 Vue 实现了一个简易版的树形图 / 组织结构图组件: Vue-Tree-Chart.
Vue-Tree-Chart 实现了最核心的组织结构图动态绘制和点击节点回调, 基于这两点已经可以满足绝大多数相关需求了, 例如前端动态增删改, 无非是编辑组件数据, 利用 Vue 的数据驱动特性界面就会自动更新; 服务端增删改就更简单了, 前端只管请求操作接口, 操作结束后拉取最新数据同步给组件就行了; 组件默认界面非常简单, 只引入了图表呈现所必须的少量样式, 后期非常方便自定义风格; 至于拖动, 缩放, 导出等不太普遍的需求, 组件没有内置, 但是在源码基础上实现这些扩展也都比较简单.
如何绘制结构图
不靠谱的思路
拿到这个需求后我首先想到的思路是用 DIV 布局 + JS 动态计算实现, 如果不考虑节点连线的话, 这个思路其实勉强也能应付, 大致实现分为三步:
一, 将数据按 "代" 拆分
原始数据格式只能是层层深入的 JSON 对象:
- {
- name: 'root',
- children: [{
- name: 'child',
- children: [{
- name: 'grandchild',
- ...
- }]
- }]
- }
按 "代" 拆分后成为这样:
- [
- [{
- id: 0,
- name: 'root
- }],
- [{
- id: 1,
- name: 'child',
- pid: 0
- }],
- [{
- id: 2
- name: 'grandchild',
- pid: 1 582735936
- }]
]全栈交流学习
形象一点, 我想要的其实是这种结构:
- <table>
- <tr>
- <td colspan="2">
- root
- </td/>
- </tr>
- <tr>
- <td>
- <table>
- <tr>
- <td>
- children1
- </td>
- <td>
- <table>
- <tr>
- <td colspan="2">
- children2
- </td>
- </tr>
- <tr>
- <td>
- grandchild1
- </td>
- <td>
- grandchild2
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- 1
- NPM i vue-tree-chart --save
- "main": "./dist/TreeChart.common.js",
- "scripts": {
- "build-bundle": "vue-cli-service build --target lib --name TreeChart ./lib/index.js",
- ...
来源: http://www.qdfuns.com/article/51116/989bcc6224c8e5b8f45559b77394f3de.html