1. 程式人生 > >jquery組織架構圖插件

jquery組織架構圖插件

extend depth 方法 fault 初始 點擊 com render jquery

## 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組織架構圖插件