基于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系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 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
解析php多线程下载远程多个文件
2013/06/25 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vue内置指令详解
2018/04/03 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
python实现DES加密解密方法实例详解
2015/06/30 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
keras 权重保存和权重载入方式
2020/05/21 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
元旦晚会策划方案
2014/02/18 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
施工安全责任书范本
2014/07/24 职场文书
防灾减灾活动总结
2014/08/30 职场文书
高一地理教学工作总结
2015/08/12 职场文书
污染环境建议书
2015/09/14 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
python数据处理之Pandas类型转换
2022/04/28 Python