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 11gR2 DG(Physical Standby)日常维护01

    环境:RHEL 6.4 + Oracle 11.2.0.4 一.主备手工切换 1.1 主库,切换成备库并启动到mount 1.2 备库,切换成主库并启动到open 1.3 新的备库启动日志应用 二.重 ...

  2. 读书笔记--SQL必知必会13--创建高级联结

    13.1 使用表别名 SQL可以对列名.计算字段和表名起别名. 缩短SQL语句 允许在一条SELECT语句中多次使用相同的表. 注意:表别名只在查询执行中使用,不返回到客户端. MariaDB [sq ...

  3. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  4. Devexpress Ribbon Add Logo

    一直在网上找类似的效果.在Devpexress控件里面的这个是一个Demo的.没法查看源代码.也不知道怎么写的.所以就在网上搜索了半天的. 终于找到类似的解决办法. 可以使用重绘制的办法的来解决. [ ...

  5. bzoj1036--树链剖分

    模板题... #include<iostream> #include<cstdio> #include<cstring> using namespace std; ...

  6. C语言辗转相除法求2个数的最小公约数

    辗转相除法最大的用途就是用来求两个数的最大公约数. 用(a,b)来表示a和b的最大公约数. 有定理: 已知a,b,c为正整数,若a除以b余c,则(a,b)=(b,c). (证明过程请参考其它资料) 例 ...

  7. Eclipse中使用Gradle构建Java Web项目

    Gradle是一种自动化建构工具,使用DSL来声明项目设置.通过Gradle,可以对项目的依赖进行配置,并且自动下载所依赖的文件,使得构建项目的效率大大提高. 1. 安装Gradle 下载Gradle ...

  8. JDK1.7.0_45源码阅读<java.lang.Boolean>

    本文适合的人群 其实感觉写这个标题的内容没有必要,只要你觉得对你有帮助那么就适合你,对你没帮助那么就不适合你.毕竟我不是专业作者,但咱会尽力的.其实最重要的一点是我不希望浪费您宝贵时间. 简要把内容在 ...

  9. 锐捷linux客户端常用命令（主要用来连接校园网或公司局域网）

     锐捷访问校园网,.sh脚本文件rjsu*.sh-u 用户名-P 密码-S 参数1保存密码参数0不保存密码   其实:  直接使用md5认证方式输入用户名密码并且配置好ip之后,重新打开网卡即可有一定 ...

  10. 使用Eclipse创建Maven Web工程

    方法/步骤 1 使用Eclipse创建Maven Web工程 2 找到Maven Project,点击Next 3 勾选上Create a simple project (不使用骨架),Next 4 ...