jquery組織架構圖插件

jquery插件

說明

jquery插件皆可用於react,使用方法:react中使用jquery插件

效果圖

使用方法:

$('.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地址,歡迎star