前端实现组织结构列表

其他 2018-08-28 17:11:58 阅读次数: 0

竖向组织结构图实现

修改源码如下：

(function($) {

  $.fn.jOrgChart = function(options) {
    var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
    var $appendTo = $(opts.chartElement);

    // build the tree
    $this = $(this);
    var $container = $("<div class='" + opts.chartClass + "'/>");
    if($this.is("ul")) {
      buildNode($this.find("li:first"), $container, 0, opts);
    }
    else if($this.is("li")) {
      buildNode($this, $container, 0, opts);
    }
    $appendTo.append($container);

  };

  // Option defaults
  $.fn.jOrgChart.defaults = {
    chartElement : 'body',
    depth      : -1,
    chartClass : "jOrgChart",
    dragAndDrop: false
  };

  var nodeCount = 0;
  // Method that recursively builds the tree
  function buildNode($node, $appendTo, level, opts) {
    var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
    var $tbody = $("<tbody/>");

    // Construct the node container(s)
    var $nodeRow = $("<tr/>").addClass("node-cells");
    var $nodeCell = $("<td/>").addClass("node-cell").attr("rowspan", 2);
    var $childNodes = $node.children("ul:first").children("li");
    var $nodeDiv;

    if($childNodes.length > 1) {
      $nodeCell.attr("rowspan", $childNodes.length * 2);
    }
    // Draw the node
    // 获取节点内容
    var $nodeContent = $node.clone()
                            .children("ul,li")
                            .remove()
                            .end()
                            .html();
//  
      //Increaments the node count which is used to link the source list and the org chart
    nodeCount++;
    $node.data("tree-node", nodeCount);
    $nodeDiv = $("<div>").addClass("node")
                                     .data("tree-node", nodeCount)
                                     .append($nodeContent);

    // Expand and contract nodes
    if ($childNodes.length > 0) {
      $nodeDiv.click(function() { var $this = $(this); //查找祖元素 var $tr = $this.closest("tr"); if($tr.hasClass('contracted')){//显示 $this.css('cursor','n-resize'); $tr.removeClass('contracted').addClass('expanded'); $tr.nextAll("tr").show(); $this.closest("td").nextAll("td").show(); }else{//隐藏 $this.closest("td").nextAll("td").hide(); $this.css('cursor','s-resize'); $tr.removeClass('expanded').addClass('contracted'); $tr.nextAll("tr").hide(); } });
    }

    $nodeCell.append($nodeDiv);
    $nodeRow.append($nodeCell);
    $tbody.append($nodeRow);

    if($childNodes.length > 0) {
      // if it can be expanded then change the cursor
      $nodeDiv.css('cursor','n-resize');

      // recurse until leaves found (-1) or to the level specified
      if(opts.depth == -1 || (level+1 < opts.depth)) { //创建行数 for(var i = 0;i<$childNodes.length*2-1;i++){ var $downLineRow = $("<tr/>"); $tbody.append($downLineRow); } //单元格 var $downLineCell = $("<td/>").attr("rowspan", $childNodes.length*2); $tbody.find("tr:first").append($downLineCell); // 引导线 var $downLine = $("<div></div>").addClass("line down"); $downLineCell.append($downLine); $tbody.append($downLineRow); //组合分割线 for(var i = 0;i<$childNodes.length*2;i++){ if(i%2==0){ var $down = $("<td>&nbsp;</td>").addClass("line right downTd"); $tbody.find("tr").eq(i).append($down); }else{ var $top = $("<td>&nbsp;</td>").addClass("line right top"); $tbody.find("tr").eq(i).append($top); } } //去除右边的边框线 $tbody.find("tr").eq($childNodes.length*2-1).find("td:first").removeClass("right"); $tbody.find("tr").eq(0).find("td:last").removeClass("right"); //增加子元素 for(var i = 0;i<$childNodes.length;i++){ var $td = $("<td class='node-container' />"); $td.attr("rowspan", 2); //递归生成 buildNode($($childNodes[i]), $td, level+1, opts); //插入元素 $tbody.children("tr").eq(i*2).append($td);  } } } $table.append($tbody); $appendTo.append($table); }; })(jQuery);

修改样式文件：

/* Basic styling */
/* Draw the lines */
.jOrgChart .line {
  height                : 2px;
  width                 : 50px;
}

.jOrgChart .down {
  background-color      : black;    
  margin                : 0px auto;
}

.jOrgChart .top {
  border-top          : 1px solid black;
}

.jOrgChart .downTd {
  border-bottom       : 1px solid black;
}

.jOrgChart .left {
  border-right          : 2px solid black;
}

.jOrgChart .right {
  border-left           : 2px solid black;
}

/* node cell */
.jOrgChart td {
  text-align            : center;
  vertical-align        : middle;
  padding               : 0;
}

/* The node */
.jOrgChart .node {
  display               : inline-block;
  background-color      : rgba(4, 89, 245, 0.52);
  border-radius         : 8px;
  vertical-align        : middle;
  height                : 25px;
}

/* jQuery drag 'n drop */

.drag-active {
  border-style          : dotted !important;
}

.drop-hover {
  border-style          : solid !important;
  border-color          : #E05E00 !important;
}

修改Html文件如下：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jOrgChart - A jQuery OrgChart Plugin</title>
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>

    <script src="jquery.jOrgChart.js"></script>

    <script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : true
        });
    });
    </script>
  </head>

  <body>

   <ul id="org" style="display:none">
    <li>
        演示学校
       <ul>
         <li id="beer">主校区
            <ul>
             <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
              <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
              <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li> <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
              <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
              <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
             <li>美术系</li>
             <li>建筑学院
               <ul>
                 <li>土木工程系</li>
                 <li>地质监控</li>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
           </ul>
         </li>
         <li>分校区
         <ul>
             <li>计算机与科学技术系</li>
             <li>美术系</li>
             <li>建筑学院
               <ul>
                 <li>土木工程系</li>
                 <li>地质监控</li>
               </ul>
             </li>
              <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
              <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li> <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
              <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
              <li>计算机与科学技术系
                <ul>
                 <li>学生处</li>
                 <li>学工部</li>
               </ul>
             </li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>            

    <div id="chart" class="orgChart"></div>
</body>
</html>

运行结果如下：
这里写图片描述
解析JSON数据生成：
数据源：

{
  "data": [{
    "id": 1,
    "name": "企业主体信用得分",
    "pid": null,
    "childrens": [
      {
        "id": 2,
        "name": "企业素质",
        "pid": 1,
        "childrens": [
          {
            "id": 5,
            "name": "基本信息",
            "pid": 2,
            "childrens": [
              {
                "id": 10,
                "name": "企业主体信息识别",
                "pid": 5,
                "childrens": [ ] },
              {
                "id": 11,
                "name": "企业持续注册时间",
                "pid": 5,
                "childrens": [ ] },
              {
                "id": 12,
                "name": "注册资本",
                "pid": 5,
                "childrens": [ ] }
            ]
          },
          {
            "id": 6,
            "name": "管理认证",
            "pid": 2,
            "childrens": [
              {
                "id": 13,
                "name": "国际性管理认证",
                "pid": 6,
                "childrens": [ ] }
            ]
          }
        ]
      },
      {
        "id": 3,
        "name": "履约记录",
        "pid": 1,
        "childrens": [
          {
            "id": 7,
            "name": "税务执行情况",
            "pid": 3,
            "childrens": [
              {
                "id": 14,
                "name": "是否按时缴纳税款",
                "pid": 7,
                "childrens": [ ] }
            ]
          },
          {
            "id": 8,
            "name": "网贷情况",
            "pid": 3,
            "childrens": [
              {
                "id": 15,
                "name": "网贷逾期",
                "pid": 8,
                "childrens": [ ] }
            ]
          }
        ]
      },
      {
        "id": 4,
        "name": "公共监督",
        "pid": 1,
        "childrens": [
          {
            "id": 9,
            "name": "行政处罚",
            "pid": 4,
            "childrens": [
              {
                "id": 16,
                "name": "处罚信息",
                "pid": 9,
                "childrens": [ ] }
            ]
          }
        ]
      }
    ]
  }
]
}

修改Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jOrgChart异步加载</title>
    <link rel="stylesheet" href='jquery.jOrgChart.css'/>
    <script type='text/javascript' src='jquery.min.js'></script>
    <script type='text/javascript' src='jquery.jOrgChart.js'></script>
    <style>
        a {
            text-decoration: none;
            color: #fff;
            font-size: 12px;
        }
        .jOrgChart .node {
            width: 120px;
            height: 50px;
            line-height: 50px;
            border-radius: 4px;
            margin: 0 8px;
        }
    </style>
</head>
<body>
<!--显示组织架构图-->
<div id='jOrgChart'></div>


<script type='text/javascript'>
    $(function(){
        //数据返回
        $.ajax({
            url: "test.json",
            type: 'POST',
            dataType: 'JSON',
            data: {action: 'org_select'},
            success: function(result){
                var showlist = $("<ul id='org' style='display:none'></ul>");
                showall(result.data, showlist);
                $("#jOrgChart").append(showlist);
                $("#org").jOrgChart( {
                    chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
                    dragAndDrop : false //设置是否可拖动
                });

            }
        });
    });

    function showall(menu_list, parent) {
        $.each(menu_list, function(index, val) {
            if(val.childrens.length > 0){

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
            }
        });

    }

</script>
</body>
</html>

再附上横向组织结构代码：

猜你喜欢

转载自blog.csdn.net/zhuwei_clark/article/details/72877737
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022