jquery组织架构图插件

最新推荐文章于 2025-06-14 16:47:15 发布

weixin_34245749

最新推荐文章于 2025-06-14 16:47:15 发布

阅读量894

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010978444

本文介绍如何在React项目中引入并使用jQuery插件lenChart，实现组织架构图的展示功能。该插件通过递归方式遍历数据，支持显示或隐藏节点子项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)