基于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 26 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
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
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
详解Python中for循环的使用
2015/04/14 Python
python简单分割文件的方法
2015/07/30 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
深入浅析Python中的迭代器
2019/06/04 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
文明餐桌活动方案
2014/02/11 职场文书
网络研修随笔感言
2014/02/17 职场文书
行政监察建议书
2014/05/19 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
2014年建筑工作总结
2014/11/26 职场文书
公司年会开场白
2015/06/01 职场文书
横空出世观后感
2015/06/09 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Python制作一个随机抽奖小工具的实现
2021/07/07 Python