layui 第三方组件平台

返回首页 发布组件

组织机构基本可以完美展示,不怕二级部门个数太多,不怕部门层级太深,也不怕部门名字太长, 均可完美展示

文档

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

//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/