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. ubuntu 14.04LTS 环境下配置NFS服务

    简言之,NFS(Network FileSystem,网络文件系统)用于在不同机器,不同操作系统之间通过网络互相分享各自的文件.NFS设计之初就是为了在不同的系统间使用,所以它的通讯协议设计与主机及操 ...

  2. Java 二叉树遍历右视图-LeetCode199

    题目如下: 题目给出的例子不太好,容易让人误解成不断顺着右节点访问就好了,但是题目意思并不是这样. 换成通俗的意思:按层遍历二叉树,输出每层的最右端结点. 这就明白时一道二叉树层序遍历的问题,用一个队 ...

  3. Troubleshooting：重新安装Vertica建库后无法启动

    环境:RHEL6.5 + Vertica7.1.0-3 1.故障现象 2.重装集群 3.再次定位 4.解决问题 5.总结 1.故障现象 故障现象:Vertica集群安装成功,但是创建数据库后一直无法u ...

  4. 【目录】Zookeeper目录

    Zookeeper的目录整理如下 1. [分布式]分布式架构 2. [分布式]一致性协议 3. [分布式]Chubby与Paxos 4. [分布式]Zookeeper与Paxos 5. [分布式]Zo ...

  5. python中的str，unicode和gb2312

    实例1: v1=u '好神奇的问题!?' type(v1)->unicode v1.decode("utf-8")# not work,because v1 is unico ...

  6. ASP.NET MVC5----了解我们使用的@HTML帮助类

    20几岁,怕什么. 自己的感觉 说一个自己最近使用AngularJS的感受,我们之前使用mvc进行项目开发都是了解和经常使用HTML的帮助类,来完成我们前端大部分代码的编写,其实在我没有接触Angul ...

  7. 用jmeter通过ssl验证访问https

    找了一个支付宝的网站尝试.https://memberprod.alipay.com/account/reg/index.htm 我用的是chrome,点这个小锁 如果是IE也可以在网页上右键,属性, ...

  8. GJM : Unity3D HIAR -【 快速入门 】 八、开发云识别应用

    开发云识别应用 为了解决识别图片数量限制,以及上线应用不能动态修改识别图片和 AR 内容的问题,我们在 HiAR SDK for Unity 新版本(v1.1.x 及后续版本)中集成了云识别功能.本文 ...

  9. 初识Git

    Git是目前世界上最先进的分布式版本控制系统.在Git诞生之前,我们一直使用的是集中式版本控制系统(如CVS.SVN等),那么两者有什么不同呢?分布式的优势又在哪里呢? 分布式vs集中式 集中式版本控 ...

  10. 利用模板将HTML从JavaScript中抽离

    利用模板将HTML从JavaScript中抽离 一.当需要注入大段的HTML标签到页面中时,应该使用服务器渲染(从服务器加载HTML标签) 该方法将模板放置于服务器中使用XMLHttpRequest对 ...