基于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模拟动画下拉菜单效果
Apr 12 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
flex弹性布局详解
Mar 20 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
python中循环语句while用法实例
2015/05/16 Python
Python探索之自定义实现线程池
2017/10/27 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python django model联合主键的例子
2019/08/06 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
旅游节目策划方案
2014/05/26 职场文书
生日宴会策划方案
2014/06/03 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python