基于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之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
学习js所必须要知道的一些
2007/03/07 Javascript
JS array 数组详解
2009/03/22 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
全面解析JavaScript Module模式
2020/07/24 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python调用C语言的实现
2019/07/26 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Python和Sublime整合过程图示
2019/12/25 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
创建索引时需要注意的事项
2013/05/13 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
公司搬迁通知
2015/04/20 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
手残删除python之后的补救方法
2021/06/26 Python
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP