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. Linux驱动开发——pr_fmt的用法

    作者:彭东林 邮箱:pengdonglin137@163.com 在阅读kernel代码的时候,总是看到有很多驱动都在第一行定义pr_fmt,闲来没事,分析了一下, 发现,确实挺方便的.下面记录分享一 ...

  2. 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇四：关于OneNote入库处理以及审核

    篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...

  3. Python爬虫小白入门（三）BeautifulSoup库

    # 一.前言 *** 上一篇演示了如何使用requests模块向网站发送http请求,获取到网页的HTML数据.这篇来演示如何使用BeautifulSoup模块来从HTML文本中提取我们想要的数据. ...

  4. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  5. SELECT TOP 1 比不加TOP 1 慢的原因分析以及SELECT TOP 1语句执行计划预估原理

    本文出处:http://www.cnblogs.com/wy123/p/6082338.html 现实中遇到过到这么一种情况: 在某些特殊场景下:进行查询的时候,加了TOP 1比不加TOP 1要慢(而 ...

  6. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  7. ASP.NET Core 中文文档 第四章 MVC（3.6.1 ）Tag Helpers 介绍

    原文:Introduction to Tag Helpers 作者:Rick Anderson 翻译:刘浩杨 校对:高嵩(Jack) 什么是 Tag Helpers? Tag Helpers 提供了什 ...

  8. [Maven]Maven入门教程

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

  9. WCF学习系列汇总

    最近在学习WCF,打算把一整个系列的文章都”写“出来,包括理论和实践,这里的“写”是翻译,是国外的大牛写好的,我只是搬运工外加翻译.翻译的不好,大家请指正,谢谢了.如果觉得不错的话,也可以给我点赞,这 ...

  10. js正则表达式校验非正整数：^((-\d+)|(0+))$

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...