使用jOrgChart插件， 异步加载生成组织架构图
jOrgChart插件是一个用来实现组织结构图的Jquery的插件-
一、特点
1.支持拖拽修改子节点；
2.支持节点缩放展示；
3.方便修改css定义样式；
4.超轻量型；
5.兼容性好，基本支持所有浏览器。
二、异步加载生成自上而下的组织结构图前期准备
1.通过后台查询数据库，生成树形数组结构，返回前台；
2.需要引入js 插件和css 文件
a.jquery.jOrgChart.css（插件样式自行修改）
b.jquery.jOrgChart.js
c. jquery.min.js
d.jquery-ui.min.js (想要拖拽布局的结构，需要引入jQuery UI插件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/jquery.jOrgChart.css" type="text/css"/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jOrgChart.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<body>
<ul id="org" style="display:none">
<li>
Food
<ul>
<li>Beer</li>
<li>Vegetables
<ul>
<li>Pumpkin</li>
<li><a href="http://tquila.com" target="_blank">Aubergine</a></li>
</ul>
</li>
<li>Bread</li>
<li>Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#org").jOrgChart();
}); </script>
</body>
</html>
以上代码调用插件，通常但不总是在文件加载。您需要在这个调用中指定列表的标识。例如：
jQuery(document).ready(function() {
$("#org").jOrgChart();
});这个调用将追加标记OrgChart默认<body>元，但您可以指定这个选项的一部分。
配置参数
只有3个配置选项：
- chartElement – 用于指定的HTML元素要添加组织结构图的标记。[default=’body’]
- depth – 告诉代码该解析的深度。默认值为“1”，它指示它要解析它的1999。 [default=-1]
- chartClass – 分配给生成标记的样式类的名称。[default=’jOrgChart’]
- dragAndDrop – 确定是否启用树节点元素的拖放功能。[default=false]
3.使用jOrgChart插件，根据返回的数据将其子节点加入到相应的<li></li>中。
三、后台数据数组结构表
首先数据表应该要有id(节点），pid(父节点的id), name的字段。
/**
* 将一个有父类id和子类id关联的二维数组转化树状数组
* @author holly
* @since 2016/10/23
* @param array $array 有关联的二维数组
* @param string $parentId 父类id的名称
* @param string $sonId 子类id的名称
* @param number $pid 父类id的值，默认为0
* @return array $arr 多维数组
*/
function FormatTree($array,$parentId,$sonId, $pid = 0)
{
$arr = array();
$tem = array();
foreach ($array as $v) {
if ($v[$parentId] == $pid) {
$tem = FormatTree($array,$parentId,$sonId,$v[$sonId]);//递归，调用自身
// 判断是否存在子数组
$v['son'] = $tem;
$arr[] = $v;
}
}
return $arr;
}
/**
public function ajaxOrganize(){
$JavaApiData = array(
'SqlCondition' => '',//查询条件
'pageIndex' => 1,//页数
'pageSize' => 1000000,//每页纪录数
);
$url = C("URL")."deptorganmanage.do";//接口地址
$result = json_decode(post($url, json_encode($JavaApiData),10),JSON_UNESCAPED_UNICODE);//请求接口，得到结果
$OrganizeList = FormatTree($result['data'],'pr_deptid','id');
die(json_encode($OrganizeList));
}
}
通过后台查询数据将数组通过json_encode转化为json格式的字符串返回前端页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组织架构图</title>
<link rel="stylesheet" href="__PUBLIC__/Admin/css/jquery.jOrgChart.css"/>
<style type="text/css">
/* .jOrgChart{width: calc(100% - 60px);}
.jOrgChart .node{writing-mode: horizontal-tb;padding: 0 5px;width: auto;}*/
</style>
</head>
<body > <!--显示组织架构图-->
<div id='jOrgChart'></div> <!-- jQuery includes -->
<script type="text/javascript" src="__PUBLIC__/Admin/js/jquery.min.js"></script>
<script src="__PUBLIC__/Admin/js/jquery.jOrgChart.js"></script>
<script src="__PUBLIC__/Admin/js/jquery-ui.min.js"></script>
<script>
$(function(){
//数据返回
$.ajax({
url: "__APP__/Data/Dept/ajaxOrganize",
type: 'POST',
dataType: 'JSON',
data: {},
success: function(result){
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(result, showlist);
$("#jOrgChart").append(showlist);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
dragAndDrop : false //设置是否可拖动
});
}
});
});
//menu_list为json数据
//parent为要组合成html的容器
var count = 0;
function showall(menu_list, parent) {
count ++;
//最多显示10层
if (count <= 10) {
$.each(menu_list, function(index, val) {
if(val.son.length > 0){
var li = $("<li></li>");
li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.deptname+"</a>").append("<ul></ul>").appendTo(parent);
//递归显示
showall(val.son, $(li).children().eq(1));
}else{
$("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.deptname+"</a>").appendTo(parent);
}
});
} }
</script>
</body>
</html>
使用jOrgChart插件， 异步加载生成组织架构图的更多相关文章
- ztree插件异步加载 使用RESTEasy报错 Only resource methods using @FormParam will work as expected. Resource methods consuming the request body by other means will not work as expected.
在使用ztree插件实现异步加载时遇到后台RESTEasy接收参数问题,查看后台报错: A servlet request to the URI http://localhost:8080/area/ ...
- Atitit jOrgChart的使用 组织架构图css html
Atitit jOrgChart的使用 组织架构图css html 1. 项目要做组织架构图,要把它做成自上而下的树形结构,于是决定1 2. Html导入 以来的css js1 2.1. 数据来源 ...
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点（Tree），点击树生成tab(选项卡)
关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...
- 插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
- ztree插件的使用及列表项拖拽的实现（jQuery）+异步加载节点数据
为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- jsTree 的简单用法--异步加载和刷新数据
首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...
- Javascript 异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- Javascript 异步加载详解
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
随机推荐
- vim 编辑器简单使用总结
http://blog.csdn.net/sharp_allen/article/details/27075133转载 说了这么多,其实还少一个和word,记事本一样的编辑器,在各个操作系统都有编辑器 ...
- 在thinkphp中，写的博文标签多对多关系的标签频率统计算法
常常看到别人的博客里面,或者网站里面有这样随机颜色,但字体大小与标签出现频率有关的标签云,于是自己就想写一个.至于颜色的随机显示,那就很简单了,这里就不列代码. 因为正在学thinkphp,所以数据查 ...
- redis成长之路——（四）
加强redis连接的连接池 虽然StackExchange.Redis针对连接已经做了很多工作,不过在实际应用场景中还是不够的,比如多实例的vip就会导致只能连到其中一个实例上等:本实例中的连接池只能 ...
- centos下升级mysql后遇到的小问题
记录今天遇到的一个小问题, 写一个app访问接口涉及到通过存储过程反馈多个结果集,但是反回多个结果集的存储过程,调用之后只能反回一个了,而且奇怪的是,即使直接在mysql上同时执行两条查询语句,第一条 ...
- 【转载】PHP PSR-1 基本代码规范(中文版)
基本代码规范 本篇规范制定了代码基本元素的相关标准, 以确保共享的PHP代码间具有较高程度的技术互通性. 关键词 "必须"("MUST")."一定不可 ...
- Java第三方数据库连接池库-DBCP-C3P0-Tomcat内置连接池
连接池原理 数据库连接池的基本思想就是为数据库连接建立一个“缓冲池”.预先在缓冲池中放入一定数量的连接,当需要建立数据库连接时,只需从“缓冲池”中取出一个,使用完毕之后再放回去.我们可以通过设定连接池 ...
- Mac入门 (二) 使用VMware Fusion虚拟机
有了Mac机,还是需在Mac上用Windows怎么办?, VMware Fusion 是运行在Mac机上的虚拟机软件, 类似于VMware workstation. 这样就可以在Mac上运行Windo ...
- [原创]如何利用BI搭建电商数据分析平台
某电商是某大型服装集团下的重要销售平台.2015 年,该集团品牌价值达数百亿元,产品质量.市场占有率.出口创汇.销售收入连年居全国绒纺行业第一,在中国有终端店3000多家,零售额80 亿.其羊绒制品年 ...
- 配置eclipse J2EE环境
早已习惯使用eclipse做Java相关的开发,因为之前安装的是RCP版本,今天发现对于J2EE的开发,在perference中居然没有Axis2的支持,需要添加J2EE的支持插件,特在此说明安装方式 ...
- ArcGIS Engine开发之空间查询
空间查询功能是通过用户选择的空间几何体以及该几何体与当前地图中要素之间的几何关系进行空间查找,从而得到查询结果的操作. 相关类与接口 空间查询相关的类主要是SpatialFilter类,其实现的接口主 ...