基于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 相关文章推荐
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
Javascript模板技术
2007/04/27 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
javascript连续赋值问题
2015/07/08 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
python微信公众号之关注公众号自动回复
2018/10/25 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Django后台admin的使用详解
2019/07/08 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
秘书岗位职责
2013/11/18 职场文书
事务机电主管工作职责
2014/02/25 职场文书
地球一小时倡议书
2014/04/15 职场文书
班级标语大全
2014/06/21 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
单位病假条范文
2015/08/17 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android