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个配置选项：

  1. chartElement – 用于指定的HTML元素要添加组织结构图的标记。[default=’body’]
  2. depth – 告诉代码该解析的深度。默认值为“1”，它指示它要解析它的1999。 [default=-1]
  3. chartClass – 分配给生成标记的样式类的名称。[default=’jOrgChart’]
  4. 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插件， 异步加载生成组织架构图的更多相关文章

  1. 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/ ...

  2. Atitit jOrgChart的使用  组织架构图css html

    Atitit jOrgChart的使用  组织架构图css html 1. 项目要做组织架构图,要把它做成自上而下的树形结构,于是决定1 2. Html导入 以来的css js1 2.1. 数据来源 ...

  3. 玩转Web之easyui(二)-----easy ui 异步加载生成树节点（Tree），点击树生成tab(选项卡)

    关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?i ...

  4. 插件使用一树形插件---zTree一zTree异步加载

    zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...

  5. ztree插件的使用及列表项拖拽的实现（jQuery）+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  6. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  7. jsTree 的简单用法--异步加载和刷新数据

    首先这两个文件是必须要引用的,还有就是引用 jQuery 文件就不说了: <link href="/css/plugins/jsTree/style.min.css" rel ...

  8. Javascript 异步加载详解(转)

    本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...

  9. Javascript 异步加载详解

    Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...

随机推荐

  1. 哈夫曼（huffman）树和哈夫曼编码

    哈夫曼树 哈夫曼树也叫最优二叉树(哈夫曼树) 问题:什么是哈夫曼树? 例:将学生的百分制成绩转换为五分制成绩:≥90 分: A,80-89分: B,70-79分: C,60-69分: D,<60 ...

  2. 使用代码向一个普通的类注入Spring的实例

    转载请在页首注明作者与原文地址 一:应用场景 什么是普通的类,就是没有@Controller,@Service,@Repository,@Component等注解修饰的类,同时xml文件中,也没有相应 ...

  3. 小萝贝控机大师工具推荐（一款在PC就能控制手机界面的工具）

    在一次写博客的过程中,要截取手机app上的几张图片,然后粘贴到博客里面去,不了解这个工具的时候,我就从手机上截图(使用其他的截图app或者使用手机自己的截图功能),然后再传送到电脑上,然后再放到博文中 ...

  4. 【干货】用大白话聊聊JavaSE — ArrayList 深入剖析和Java基础知识详解（二）

    在上一节中,我们简单阐述了Java的一些基础知识,比如多态,接口的实现等. 然后,演示了ArrayList的几个基本方法. ArrayList是一个集合框架,它的底层其实就是一个数组,这一点,官方文档 ...

  5. CSS知识总结（四）

    CSS常用样式 2.元素样式 1)宽度 width:auto|length 单位:设置以像素计的宽度值(px) 设置以百分比计的宽度值(%) 例:p {width:200px;} div {width ...

  6. [Maven]Maven入门教程

    概念 Maven是什么 Maven 是一个项目管理工具.它负责管理项目开发过程中的几乎所有的东西. 版本 maven有自己的版本定义和规则 构建 maven支持许多种的应用程序类型,对于每一种支持的应 ...

  7. 大话keepalive

    大话keepalive 我们说到keepalive的时候,需要先明确一点,这个keepalive说的是tcp的还是http的. tcp的keepalive是侧重在保持客户端和服务端的连接,一方会不定期 ...

  8. import matplolib 时出现"This probably means that tk wasn't installed properly."的解决方法

    最近又添了一台新电脑,配置好各个依赖环境后想用matplotlib画个图,结果报出下面的错误 根据报错分析,应该是C:/Python27/tcl/tk8.5/tk.tcl这个文件出问题了,根据图中的信 ...

  9. CLR via C# 摘要一：托管程序的执行模型

    托管程序的执行模型大致如下: 编译源代码为程序集(dll或exe文件),程序集包括了记录相关信息的元数据和IL代码 执行程序集文件时,启动CLR,JIT负责把IL编译为本地代码并执行 IL是微软推出的 ...

  10. 基于NodeJS的秘室聊天室

    借着放假期间将NodeJS重新回顾了一下并玩了一下sketch来进行设计界面,很不错.(注:代码整理后会放到github上,请关注.) 本次聊天室我给它定义了一个名称叫“秘密聊天室”. 需求: 技术选 ...