基于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实现图片无间断轮播效果
Aug 25 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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中将网址转换为超链接的函数
2011/09/02 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
Vue.js中的computed工作原理
2018/03/22 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python continue语句用法实例
2014/03/11 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python如何存储数据到json文件
2020/03/09 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
情况说明书格式范文
2014/05/06 职场文书
社区服务标语
2014/07/01 职场文书
ktv好的活动方案
2014/08/15 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
python基础入门之字典和集合
2021/06/13 Python
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS