使用jOrgChart插件实现组织架构图的展示
时间:2022-04-22
本文章向大家介绍使用jOrgChart插件实现组织架构图的展示,主要内容包括一、说明、二、实例:、2、html页面(test.html)、3、效果图(打开test.html页面后即可看到如下效果)、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
项目要做组织架构图,要把它做成自上而下的树形结构。
一、说明
(1)通过后台查询数据库,生成树形数组结构,返回到前台。
(2)需要引入的js插件和css文件:
①jquery.jOrgChart.css
②jquery.min.js
③jquery.jOrgChart.js
(3)使用jOrgChart插件,根据返回的数据将其子节点加入到相应的<li></li>中。
首先,我们的数据表应该要有 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": 13,
"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格式的数据)
{
"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": 13,
"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": [
]
}
]
}
]
}
]
}
]
}
2、html页面(test.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jOrgChart异步加载</title>
<link rel="stylesheet" href='jquery.jOrgChart.css'/>
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='jquery.jOrgChart.js'></script>
<style>
a {
text-decoration: none;
color: #fff;
font-size: 12px;
}
.jOrgChart .node {
width: 120px;
height: 50px;
line-height: 50px;
border-radius: 4px;
margin: 0 8px;
}
</style>
</head>
<body>
<!--显示组织架构图-->
<div id='jOrgChart'></div>
<script type='text/javascript'>
$(function(){
//数据返回
$.ajax({
url: "test.json",
type: 'GET',
dataType: 'JSON',
data: {action: 'org_select'},
success: function(result){
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(result.data, showlist);
$("#jOrgChart").append(showlist);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
dragAndDrop : false //设置是否可拖动
});
}
});
});
function showall(menu_list, parent) {
$.each(menu_list, function(index, val) {
if(val.childrens.length > 0){
var li = $("<li></li>");
li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
//递归显示
showall(val.childrens, $(li).children().eq(1));
}else{
$("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
}
});
}
</script>
</body>
</html>
3、效果图(打开test.html页面后即可看到如下效果)
注意:由于数据是由ajax异步请求获取到的,所以直接双击html文件打开是不行的,需要在服务器环境下运行。
- C#进阶系列——WebApi接口测试工具:WebApiTestClient
- 由Dapper QueryMultiple 返回数据的问题
- 【初探IONIC】不会Native可不可以开发APP?
- MVC视图展现模式之移动布局解析-续集
- 在 ASP.NET MVC 中使用异步控制器
- MVC5 Entity Framework学习之异步和存储过程
- ConcurrentDictionary 对决 Dictionary+Locking
- 在ASP.NET 5中使用SignalR
- 避免在ASP.NET Core中使用服务定位器模式
- 直传文件到Azure Storage的Blob服务中
- 闭路电视探头究竟有多不安全?
- windows API 开发飞机订票系统 图形化界面 (四)
- windows API 开发飞机订票系统 图形化界面 (三)
- windows API 开发飞机订票系统 图形化界面 (二)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浅谈keras使用中val_acc和acc值不同步的思考
- PHP安装BCMath扩展的方法
- keras实现多GPU或指定GPU的使用介绍
- 浅谈keras中的keras.utils.to_categorical用法
- python 使用多线程创建一个Buffer缓存器的实现思路
- keras.utils.to_categorical和one hot格式解析
- Python OpenCV读取中文路径图像的方法
- Java如何基于wsimport调用wcf接口
- Python装饰器结合递归原理解析
- Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
- 浅谈keras通过model.fit_generator训练模型(节省内存)
- PHP实现通过文本文件统计页面访问量功能示例
- 解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
- python里的单引号和双引号的有什么作用
- 在PHP中输出JS语句以及乱码问题的解决方案