基于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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
详解用node编写自己的cli工具
2017/05/23 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
JavaScript中的"=、==、==="区别讲解
2019/01/22 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
详解vue路由
2020/08/05 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
会计辞职信范文
2014/01/15 职场文书
2014年党建工作总结
2014/11/11 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js