基于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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
css3动画效果抖动解决方法
Sep 03 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
详解CSS3浏览器兼容
Dec 24 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连接oracle数据库的核心步骤
2016/05/26 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js倒计时小程序
2013/11/05 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
纯JS实现轮播图
2017/02/22 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
python解析xml模块封装代码
2014/02/07 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
高一学生评语大全
2014/04/25 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
丧事主持词
2015/07/02 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android