JQ插件OrgChart实现组织结构图
最近在做一个OA系统的组织结构图,需求如下。
第一眼看起来让人联想到脑图,思维导图大家都比较熟悉。但这不是脑图,是组织结构图。有添加,编辑,删除等功能…
随后我就找了一些插件:
1、jsMind(脑图): 查看文档
jsMind目前有左右伸展的,没有上下伸展。
2、JavaScript InfoVis Toolkit:查看文档
JavaScript InfoVis Toolkit光看这些展示demos就觉得它功能很强大,右下角那个SpaceTree树状结构可以参考
3、jTopo:查看文档
jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。
4、ECOTree
5、JointJs:查看文档
6、KityMinder :查看文档
一款在线编辑的百度脑图
7、jOrgChart:这里写链接内容
8、OrgChart:查看文档
作者说想法源于jOrgChart,jOrgChart很久没更新了,自己正好也有一些想法往上添加。就有了现在的OrgChart
OrgChart小示例很多,我最终选用了OrgChart来开发组织架构图
目前实现的效果:
添加、编辑、删除功能都可以在OrgChart的examples中找到启发,不难实现。编辑功能,我是在div里面放了一个input框实现的。(其实除了这个方法,div的contenteditable属性也能实现这个功能)
考虑的难点:
1、组织结构图显示所占的的大小限制,主要是考虑横向内容如果超出的问题。
2、根据需求,组织结构图下面是需要竖排显示的。
想要实现竖排显示,真的是XXXX
首先需要判断呈现竖排显示的内容区域,其次,设置图标的小菜单出现的位置需要调整。在竖排显示的标签上新增的标签也需要竖排显示…
道行太浅,竖排显示想要完整实现太麻烦了。放弃治疗~
JQ插件OrgChart实现组织结构图相关推荐
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- jq插件的编写方法(自定义jq插件)
jq插件用起来很方便,给客户端的编程带来很大的好处,节省大量的开发时间 我用Jq也有好长时间了,今天在一个项目中用一个插件的时候,忽然感觉这个插件有一个bug 这让我心生了自己写一个jq插件的想法 下 ...
- JS_自己写的JQ插件
看了<<锋利的jQuery>>之后,受益匪浅,特别是有关代码风格方面的内容. 于是想把以前写的一些JQ插件整理一下,以留备用...(里面也有一些书中的例子,我也放进去了) 其它 ...
- 【传智播客郑州校区分享】JQ插件机制
JQ插件概述 所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码 ...
- jq插件的基础知识,以及小demo
什么是插件 ,jq插件,优点,缺点 ,未完待续- JQ插件就是用JQ代码编写的工具.就比如说我们用的模板,如EasyUi.我们只需要引入EasyUi的JS文件,然后调用它对应的方法,效果就出来了.实现 ...
- html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)
有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...
- jq插件调用常见错误处理
在调用jq插件时,有时会遇到莫名其妙的错误.特别是当使用jq老版本或者年代久远的插件时更为常见. 这时多半是由于jq的更新太快造成的. 在jq的发展中,特别是1.8.3之后的jq放弃了以前的很多写法, ...
- 【vue】解决使用vue,导致jq插件失效的问题
[vue]解决使用vue,导致jq插件失效的问题 参考文章: (1)[vue]解决使用vue,导致jq插件失效的问题 (2)https://www.cnblogs.com/cindy2035/p/10 ...
- 移动端JQ插件hammer使用详解
** 移动端JQ插件hammer使用详解 ** 用法: 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样,在后面加上hammer就可以了 var hamme ...
- orgchart.js组织结构图,优雅的方式呈现结构数据
orgchart.js组织结构图,优雅的方式呈现结构数据 orgchart.js组织结构图创建简单.灵活且高度可定制的组织结构图,以优雅的方式呈现结构数据. orgchart.js组织结构图是经理用来 ...
最新文章
- 查看linux服务器硬盘IO读写负载
- object.defineProperty
- Java 并发——多线程基础
- 了解哪些c++11特性?
- 分析 Go time.After 引起内存暴增 OOM 问题
- SPARK RDD JAVA API 用法指南
- Linux VMware 快照不准,VmWare Workstation 关于Linux 虚拟机快照或克隆后 识别不到网卡问题...
- 40.广搜练习:洪水
- 计算机二级java有用吗_计算机二级java含金量怎么样
- 2018国内优秀开源镜像站汇总
- 北京大学自然辩证法概论知识点总结(2021)
- SD--定价过程的16个字段的作用说明
- 浅析百度有啊生活平台未来发展的八大潜力特征
- 阿里云sms短信服务
- 穆迪将收购GCR Ratings多数股权以拓展非洲业务
- Newtonsoft.Json.JsonSerializationException
- 在iOS应用中跳转到淘宝或天猫客户端商品详情页
- 云和恩墨校园猎手招募令
- C# 零基础入门知识点汇总
- java,民族类型枚举
热门文章
- 用图片来搜索 教你玩转Google按图搜索
- 概率论 方差公式_2020考研数学:概率论核心考点与常见题型(上)
- 金蝶如何用计算机,金蝶软件要换电脑用,该怎么处理?
- 蓝牙诊断工具_蓝牙故障诊断和使用指南
- 用来进行虚拟仿真实验的软件有哪些?这3款简单易懂的软件值得你拥有
- android 双屏 音频输出,一种Android系统双屏异显的两路音频实现方法与流程
- linux内核配置打开声卡,配置树莓派/Linux默认声卡设备
- windows系统不安装软件查看cpu温度
- JS === 实现多个光标跟随事件
- WEB 系统架构演变