基于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参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
python得到windows自启动列表的方法
2018/10/14 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
解决Python中回文数和质数的问题
2019/11/24 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
企业门卫岗位职责
2013/12/12 职场文书
八年级音乐教学反思
2014/01/09 职场文书
感恩之星事迹材料
2014/05/03 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
先进班集体事迹材料
2014/12/25 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
python spilt()分隔字符串的实现示例
2021/05/21 Python