首页 > Web开发 > 详细

jquery组织架构图插件

时间:2017-09-11 19:23:46      阅读:264      评论:0      收藏:0      [点我收藏+]

## jquery插件
#### 效果图
![效果图][1]
#### 使用方法:
```
$(‘.orgWrap‘).lenChart({
data:obj, //数据源
drag:true, //是否可拖拽
depth:3, //初始化展示的层级
renderdata:function(data,$dom){}, //根据数据定制每个名片里面的DOM结构
callback:function(){} //渲染完图表后的回调函数
})
```
#### 数据源格式
```
var obj = {
id:001,
data:{}
children:[
{
id:001,
data:{}
children:[]
},
{
id:001,
data:{}
children:[]
}
]
}
```
#### 插件说明
使用递归的方式深层遍历数据,架构图第二层为横向结构,
从第三层开始为竖向结构,解决了横向太长的问题。
点击加减号按钮可以显示与隐藏当前节点的子节点。
#### 源码解析(jquery插件的写法)

```
(function($,window,document){
$.fn.lenChart = function (options) {//这里的options可以取到调用时传的参数
var defaults = {};
var opts = $.extend({}, defaults, options);
...
}
})(jQuery,window,document)
```
#### 最后附上[github](https://github.com/liubin915249126/javascript/tree/master/lencharts)地址,欢迎star

[1]: /img/bVUd8X

jquery组织架构图插件

原文:http://www.cnblogs.com/liubin53/p/7506162.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!