基于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 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 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
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
python字典序问题实例
2014/09/26 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
python 爬取小说并下载的示例
2020/12/07 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
小学语文业务学习材料
2014/06/02 职场文书
消防工作实施方案
2014/06/09 职场文书
2014会计年终工作总结
2014/12/20 职场文书
2016党校培训心得体会
2016/01/07 职场文书
员工给公司的建议书
2019/06/24 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript