jquery組織架構圖插件

tolerious 發布于2019-08-01 17:33 / 1140人閱讀

摘要：點擊加減號按鈕可以顯示與隱藏當前節點的子節點。源碼解析插件的寫法這里的可以取到調用時傳的參數最后附上地址歡迎

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

GPU云服務器云服務器 jquery插件源碼jquery jquery插件手寫jQuery插件 jquery表單插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51214.html

jquery組織架構圖插件

摘要：點擊加減號按鈕可以顯示與隱藏當前節點的子節點。源碼解析插件的寫法這里的可以取到調用時傳的參數最后附上地址歡迎 jquery插件說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segmentfault.com/img/bVX24E?w=895&h=756); 使用方法: $(.orgWrap).lenChar...

sydMobile 2019-08-20 19:07 評論0 收藏0
spacetree組織架構圖實現異步加載子節點，和定制化內容展示

摘要：組織架構圖說明插件皆可用于使用方法中使用插件效果圖定制化內容的效果圖插件說明很好的的組織架構圖，從上到下按層級展示匯報關系支持定制化內容，和異步加載子節點下面會講到。且在開發中，用戶希望能夠根據數據定制每一塊的內容展示。 spacetree組織架構圖說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segme...

youkede 2019-08-29 13:25 評論0 收藏0
spacetree組織架構圖實現異步加載子節點，和定制化內容展示

摘要：組織架構圖說明插件皆可用于使用方法中使用插件效果圖定制化內容的效果圖插件說明很好的的組織架構圖，從上到下按層級展示匯報關系支持定制化內容，和異步加載子節點下面會講到。且在開發中，用戶希望能夠根據數據定制每一塊的內容展示。 spacetree組織架構圖說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segme...

TANKING 2019-08-21 16:26 評論0 收藏0