前端关系图谱插件_js前端使用jOrgChart插件实现组织架构图的展示

一、说明

(1)通过后台查询数据库，生成树形数组结构，返回到前台。

(2)需要引入的js插件和css文件：

①jquery.jOrgChart.css

②jquery.min.js

③jquery.jOrgChart.js

(3)使用jOrgChart插件，根据返回的数据将其子节点加入到相应的

中。

首先，我们的数据表应该要有 id(节点)，pid(父节点的id)，name的字段，

那么我们要把这个数组转为树形数组结构，即将各个元素放在 pid 父类元素的 childrens字段中，下面就是简单生成树形数组的代码。至于展示出来的样式，可以在html页面中添加自定义样式覆盖它之前的样式。

注意：

后台返回的数据格式必须如下，其中id，pid字段为必须要有。childrens字段也为必须的，不过字段名可以自己定义，name字段是根据自己业务需求的字段，在这里以name字段作为要显示的文本内容：

{

"data": [{

"id": 1,

"name": "企业主体信用得分",

"pid": null,

"childrens": [

{

"id": 2,

"name": "企业素质",

"pid": 1,

"childrens": [

{

"id": 5,

"name": "基本信息",

"pid": 2,

"childrens": [

{

"id": 10,

"name": "企业主体信息识别",

"pid": 5,

"childrens": [

]

},

{

"id": 11,

"name": "企业持续注册时间",

"pid": 5,

"childrens": [

]

},

{

"id": 12,

"name": "注册资本",

"pid": 5,

"childrens": [

]

}

]

},

{

"id": 6,

"name": "管理认证",

"pid": 2,

"childrens": [

{

"id"