jquery组织架构图插件

tolerious 发布于2019-08-01 17:33 / 938人阅读

摘要：点击加减号按钮可以显示与隐藏当前节点的子节点。源码解析插件的写法这里的可以取到调用时传的参数最后附上地址欢迎

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

私有云服务器托管 jquery插件源码jquery jquery插件手写jQuery插件 jquery表单插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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