基于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书写规范、顺序和命名规则
Mar 06 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 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动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
写的htc的数据表格
2007/01/20 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
python list语法学习(带例子)
2013/11/01 Python
详谈python http长连接客户端
2017/06/12 Python
Python set常用操作函数集锦
2017/11/15 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
学前教育求职自荐信范文
2013/12/25 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
实验室的标语
2014/06/20 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL