先直接上图,喜欢的朋友再向下看:

//1.下载orgChart 
//2.模块化使用
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //全局定义一次, 加载formSelects
    layui.config({
        base: '../src/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        orgChart: 'orgChart'
    });
    //加载模块
    layui.use(['jquery', 'orgChart'], function(){
        var orgChart = layui.orgChart;
         
    });
</script>
 
//3.非模块化使用
<script src="layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="orgChart.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var orgChart = layui.orgChart;
     
</script>

基本参数

elm: '.orgWrap',//jquery选择器,ID class等等 各种组合选择都可以
data: data,//树形结构的json数据,数据结构的格式见下方
drag: true,//是否可以拖动
depth: 3,//初始展开的部门层数,推荐为2 或者3
renderdata:function(data, $dom) {}//渲染每一个节点时的回调,每一个部门节点的渲染方式,data为当前节点的数据,$dom为当前节点的dom元素
callback:function(){}渲染完成的回调

代码示例

HTML部分：
<div class="orgWrap">
</div>
这里记住，一定要在渲染的div上加上orgWrap这个class，之前忘了说了。。。
一定要记住
JS部分：
orgChart.render({
	elm: '.orgWrap',
	data: data,
	drag: true,
	depth: 3,
	renderdata: function(data,$dom)
		var value = data;
		if(value && Object.keys(value).length) {
			var $name = $('<div class="name"></div>');
			!!(value.name) && $name.text(value.name);
			$dom.append($name)
			$dom.addClass('organization')
		}
	},
	callback: function() {}
});

要注意的是插件为两个文件:orgChart.js与orgChart.css,其中lenchart.js放在extend中orgChart.css放在src/style中,这个路径不要变,如果你想变,请在orgChart.js中去修改JS代码,不然css无法正常引入,会丢样式.
发布的比较仓促,如果有bug的话,请及时提出,在render方法中可以做更多内部的展示,我只是做了一个部门名称的展示,比如有部门有多少人,部门负责人是谁,这些只要你自己设置好,都 是可以展示的,全看个人需求.
另外.组织机构请按下列数据结构传递:

{
		"id": 26,
		"name": "顶级部门",
		"parentId": null,
		"children": [{
			"id": 27,
			"name": "办公室",
			"parentId": 26,
			"children": [{
				"id": 28,
				"name": "信息中心",
				"parentId": 27,
				"children": [{
					"id": 29,
					"name": "信息中心1",
					"parentId": 28
				}]
			}]
		}, {
			"id": 30,
			"name": "信息中心",
			"parentId": 26
		}, {
			"id": 31,
			"name": "采购部",
			"parentId": 26
		}, {
			"id": 44,
			"name": "部门1",
			"parentId": 26,
			"children": [{
				"id": 51,
				"name": "部门1-2",
				"parentId": 44,
				"children": [{
					"id": 52,
					"name": "部门1-2-1",
					"parentId": 51
				}]
			}, {
				"id": 53,
				"name": "部门1-1",
				"parentId": 44,
				"children": [{
					"id": 54,
					"name": "部门1-1-1",
					"parentId": 53,
					"children": [{
						"id": 55,
						"name": "部门1-1-1-1",
						"parentId": 54,
						"children": [{
							"id": 56,
							"name": "部门1-1-1-1-1",
							"parentId": 55,
							"children": [{
								"id": 57,
								"name": "部门1-1-1-1-1-1",
								"parentId": 56
							}]
						}]
					}]
				}]
			}]
		}, {
			"id": 45,
			"name": "部门2",
			"parentId": 26
		}, {
			"id": 46,
			"name": "部门3",
			"parentId": 26
		}, {
			"id": 47,
			"name": "部门4",
			"parentId": 26
		}, {
			"id": 48,
			"name": "部门5",
			"parentId": 26
		}, {
			"id": 49,
			"name": "部门5",
			"parentId": 26
		}, {
			"id": 50,
			"name": "部门6名字要长长长长长长长够长了吗?",
			"parentId": 26
		}]
	}

更详细教程请移步我的个人博客: https://blog.coder666.cn/2018/09/09/blog12/
或者博客小程序: