基于 jtopo 二次封装,拓扑图编辑器

jTopo Topology

基于jtopo二次封装,修复了一些bug。 便于直接使用,也可以稍作修改后应用到各前端框架中。
纯前端项目,所有ajax接口保留,采用模拟数据,实际开发过程中稍作修改即可对接后端。

预览

预览方式:
下载该项目代码,用webstorm打开即可预览(或用其他内置http服务器的IDE打开)

实现功能 拓扑图的加载 工具栏、鼠标右键菜单 多种类型节点、连线的添加/删除 节点的图片的缩放与调整 鼠标经过节点显示tooltip信息 项目依赖 jQuery jTopo.js layui 其中layui用于本项目的页面布局和组件,非必须。 项目结构

. ├── json // 模拟数据,实际使用中用ajax代替 ├── screenshots // 项目截图(无用) ├── static | ├── font-awesome-4.7.0 | ├── jquery-3.3.1 | ├── jtopo-0.4.8 | ├── jtopo-0.4.8-dev.js // jtopo源码,已经过修改 | └── jtopo-0.4.8-dev(带注释版报错).js // 本项目优化了一部分源码,故不要使用这个包,仅辅助解读源码用 | ├── layui-2.3.0 | └── public // 本项目的静态文件 | ├── css // 样式文件,根据实际项目修改 | ├── img // 拓扑图引用图片,根据实际项目修改 | └── js // jtopo-editor.js为二次封装代码,如需在vue等框架中使用,可适当进行修改 | ├── network_topology.html // demo页面 ├── 其它 | 提交记录 2019.03.22 更新与修复demo页面的bug(本次提交未对jtopo源码做修改,仅是demo页面的更新) 2018.08.23 拓扑图连线(Link)属性编辑 修改源码, 做反序列化保护,防undefined(之前需要在调用方做保护) 修改源码, 新增以图片形式导出拓扑图 2018.08.02 修改源码, 使序列化的时候支持节点属性值为json对象 2018.07.04 拓扑图节点(Node)属性编辑 节点tooltip的触发与显示 编辑和非编辑模式切换 代码部分重构 2018.06.29 节点和连线的添加删除 拓扑图序列化 右键菜单和功能 前端页面部分组件化整理 Vue版本拓扑图

等有时间了从项目中剥离出来,将在本项目基础上另起一个分支

vue版本预览

官方API文档补充 参见 官方API文档补充.txt

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。