基于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制作登录表单的步骤
Apr 07 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
prototype 的说明 js类
2006/09/07 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
php跨域调用json的例子
2013/11/13 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python中操作符重载用法分析
2016/04/29 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
基于python中__add__函数的用法
2019/11/25 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
家长写给老师的建议书
2014/03/13 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
工作检讨书500字
2014/10/19 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS