jquery组织架构图插件

jQuery插件

效果图


效果图

使用方法

$('.orgWrap').lenChart({

       data:obj,  //数据源

       drag:true,  //是否可拖拽

       depth:3,  //初始化展示的层级

       renderdata:function(data,$dom){}, //根据数据定制每个名片里面的DOM结构

        callback:function(){} //渲染完图表后的回调函数

        })

数据源格式

var obj ={

            id:0001

            data:{} 

            children:[

                  {

                     id:0001

                     data:{}

                    children:[]

                 }

             ]

}


插件说明

使用递归的方式深层遍历数据,架构图第二层为横向结构,

从第三层开始为竖向结构,解决了横向太长的问题。

点击加减号按钮可以显示与隐藏当前节点的子节点。

源码分析(jQuery插件的写法)

(function($,window,document){

        $.fn.lenChart = function (options) {//这里的options可以取到调用时传的参数

                         var defaults = {};

                         var opts = $.extend({}, defaults, options);

                         ...

                      }

           })(jQuery,window,document)


最后附上github链接,欢迎start

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 14,912评论 18 500
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 859评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 658评论 0 1
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 6,727评论 2 17
  • $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 308评论 0 4