前端关系图谱插件_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": [
{
"name": "企业主体信息识别", "pid": 5,
"childrens": [
]
},
{
"id": 11,
"name": "企业持续注册时间", "pid": 5,
"childrens": [
]
},
{
"id": 12,
"name": "注册资本", "pid": 5,
"childrens": [
]
}
]
},
{
"id": 6,
"name": "管理认证", "pid": 2,
"childrens": [
{
"id": 13,
jquery parent"name": "国际性管理认证", "pid": 6,
"childrens": [
]
{
"id": 3,
"name": "履约记录", "pid": 1,
"childrens": [
{
"id": 7,
"name": "税务执⾏情况", "pid": 3,
"childrens": [
{
"id": 14,
"name": "是否按时缴纳税款", "pid": 7,
"childrens": [
]
}
]
},
{
"id": 8,
"name": "⽹贷情况", "pid": 3,
"childrens": [
{
"id": 15,
"name": "⽹贷逾期", "pid": 8,
"childrens": [
},
{
"id": 4,
"name": "公共监督",
"pid": 1,
"childrens": [
{
"id": 9,
"name": "⾏政处罚",
"pid": 4,
"childrens": [
{
"id": 16,
"name": "处罚信息",
"pid": 9,
"childrens": [
]
}
]
}
]
}
]
}
]
}
⼆、实例：
1、json⽂件(test.json)(即后台接⼝返回的json格式的数据) {
"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": [

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。