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. Oracle数据库升级(10.2.0.4->11.2.0.4)

    环境: RHEL5.4 + Oracle 10.2.0.4 目的: 在本机将数据库升级到11.2.0.4 之前总结的Oracle数据库异机升级:http://www.cnblogs.com/jyzha ...

  2. 现代3D图形编程学习-关于本书（译）

    本书系列 现代3D图形编程学习 关于这本书 三维图像处理硬件很快成为了必不可少的组件.很多操作系统能够直接使用三维图像硬件,有些甚至要求需要有3D渲染能力的硬件.同时对于日益增加的手机系统,3D图像硬 ...

  3. C站投稿189网盘视频源（UP主篇）

    C站投稿189网盘视频源(UP主篇) 现在C站(吐槽弹幕网)的视频来源基本靠的都是189网盘,比如番剧区的每个视频基本来源于此,不像AB两站,拥有自己的资源服务器,为啥呢?没钱啊.都是外来的视频.本站 ...

  4. 你真的会玩SQL吗？Case也疯狂

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...

  5. Node.js 给前端带来了什么

    在软件开发领域,前端工程师曾经是一个比较纠结的职业.在Web技术真正发展起来之前的相当长一段时间里,由于技术门槛很低,前端工程师行业一直是鱼龙混杂的状态.其中很多号称是Web开发者的人实际上并没有什么 ...

  6. ASP.NET MVC传递参数(model)

    一看到此标题,相信你也会.因为路由是可以从URL地址栏传过去的. 但是Insus.NET不想在地址栏传递,还是一个条件是jQuery的Ajax进行POST的.Insus.NET不清楚别人是怎样处理的, ...

  7. QML 从无到有 2 （移动适配）

    随着项目深入,需要移植到安卓上,问题来了,QML安卓适配! 幸好PC端程序和手机屏幕长宽比例相似.虽然单位像素,尺寸不同,通过比例缩放,可以实现组件PC和安卓通用代码. 第一步:定义全局的转换函数(3 ...

  8. macOS 升级到了10.12.1

    除了明面上的一些更新,但我感觉最重要的是触摸板的行为特征又还原了.

  9. Windows消息机制

    Windows的消息系统是由3个部分组成的: · 消息队列.Windows能够为所有的应用程序维护一个消息队列.应用程序必须从消息队列中获取消息,然后分派给某个窗口.· 消息循环.通过这个循环机制应用 ...

  10. ++a和a++的区别

    另: short s = 4; s = s + 1; // 编译不通过.因为编译器无法判断等号右边的运算结果是否依然在等号左边的short类型范围内,容易丢失精度. s += 1; // 编译通过.+ ...