基于DOM+CSS3实现OrgChart组织结构图插件


Posted in HTML / CSS onMarch 02, 2016

jQuery OrgChart 是一个jQuery插件能够让帮你将一组嵌套的元素渲染成一个易于阅读的树形结构。易于使用。 你可以一个特定的树节来展示和隐藏一个树分支。可以采用CSS进行风格修改。还可以拖拉的方式来改变树节点的位置。
OrgChart 是一个基于纯DOM与CSS3的组织结构图插件

基于DOM+CSS3实现OrgChart组织结构图插件


示例代码:
CSS Code复制内容到剪贴板
  1. // sample of core source code    
  2. var datascource = {    
  3. 'name''Lao Lao',    
  4. 'title''general manager',    
  5. 'relationship': ‘001’,    
  6. 'children': [    
  7. 'name''Bo Miao''title''department manager''relationship': ‘110’ },    
  8. 'name''Su Miao''title''department manager''relationship': ‘111’,    
  9. 'children': [    
  10. 'name''Tie Hua''title''senior engineer''relationship': ‘110’ },    
  11. 'name''Hei Hei''title''senior engineer''relationship': ‘110’ }    
  12. ]    
  13. },    
  14. 'name''Yu Jie''title''department manager''relationship': ‘110’ }    
  15. ]    
  16. };    
  17. $('#chart-container').orgchart({    
  18. 'data' : datascource,    
  19. 'depth': 2,    
  20. 'nodeTitle''name',    
  21. 'nodeContent''title'    
  22. });  

关于小编给大家介绍的基于DOM+CSS3实现OrgChart组织结构图插件 到此为止,希望对大家有所帮助!

HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 #HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 #HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 #HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 #HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 #HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 #HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 #HTML / CSS
You might like
PHP写的求多项式导数的函数代码
2012/07/04 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
新大陆软件面试题
2016/11/24 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
护理自我鉴定范文
2013/10/06 职场文书
高中生的自我评价
2014/03/04 职场文书
小学生作文评语
2014/04/18 职场文书
学生手册评语
2014/05/05 职场文书
婚礼秀策划方案
2014/05/19 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
诚信承诺书
2015/01/19 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
Python中字符串对象语法分享
2022/02/24 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers