使用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 ...
随机推荐
- Cocoa深入学习:NSOperationQueue、NSRunLoop和线程安全 (转)
目前在 iOS 和 OS X 中有两套先进的同步 API 可供我们使用:NSOperation 和 GCD .其中 GCD 是基于 C 的底层的 API ,而 NSOperation 则是 GCD 实 ...
- 中文分词工具探析（二）：Jieba
1. 前言 Jieba是由fxsjy大神开源的一款中文分词工具,一款属于工业界的分词工具--模型易用简单.代码清晰可读,推荐有志学习NLP或Python的读一下源码.与采用分词模型Bigram + H ...
- unity3d 免费好用的数据库处理框架 数据库直连框架
一.概述 前不久有一个哥们做PC游戏开发的.使用到Unity3d, 正好找到我. 我给他提供了Unity3d如何Moon.Orm来智能化编程的方式. 我们先看看怎么更加便捷sqlite. http:/ ...
- 关于for循环的几个小练习，例如奇数偶数，阶乘，求和等
1 .100以内的奇数和偶数 var js = ""; var os = ""; for(var i=1;i<101;i++) { if(i%2 == 0 ...
- python之最强王者（8）——字典（dictionary）
1.Python 字典(Dictionary) 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包 ...
- IT基础架构规划方案一(网络系统规划)
背景 某集团经过多年的经营,公司业务和规模在不断发展,公司管理层和IT部门也认识到通过信息化手段可以更好地支撑公司业务运营.提高企业生产和管理效率.同时随着新建办公 ...
- 面向对象设计模式纵横谈：Singelton单件模式（笔记记录）
李建忠老师讲的<面向对象设计模式纵横谈>,早就看过了,现在有了时间重新整理一下,以前的博客[赛迪网]没有了,现在搬到博客园,重新过一遍,也便于以后浏览. 设计模式从不同的角度分类会得 ...
- 使用Ring Buffer构建高性能的文件写入程序
最近常收到SOD框架的朋友报告的SOD的SQL日志功能报错:文件句柄丢失.经过分析得知,这些朋友使用SOD框架开发了访问量比较大的系统,由于忘记关闭SQL日志功能所以出现了很高频率的日志写入操作,从而 ...
- ubuntu设置时区为美国中部时间西六区
查看当前ubuntu系统时区 date -R Fri, Dec :: + 显示的是东八区时间及北京时间 然后输入tzselect 按照提示修改对应时区 本例子修改为美国中部时间 西六区 ~$ tzse ...
- CSS3之盒子模型
display:box 使子元素成行排列如果父级宽度小于子级盒子 不会把超出部分挤出下面 而是直接超出 -box-orient:vertical 使盒子垂直显示 默认水平显示 -box-direct ...