竖向组织结构图实现

修改源码如下：

(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 treefunction 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 chartnodeCount++;$node.data("tree-node", nodeCount);$nodeDiv = $("<div>").addClass("node").data("tree-node", nodeCount).append($nodeContent);// Expand and contract nodesif ($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 specifiedif(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生成jorgchartdragAndDrop : 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>

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

前端实现组织结构列表相关推荐

京东前端：三级列表页持续架构优化
为什么80%的码农都做不了架构师?>>> 王向维,京东商城三级列表页架构师.工作期间,完成了京东三级列表页由Node.js版本到Nginx+Lua版本的变迁,并针对三级列表页前 ...
前端架构，前端架构组织结构，目录结构架构
[编者按]本文作者Matt Carella为我们讲解了如何构建一个良好的架构.除了选择正确的工具以外,在组织工作流中遵循清晰整洁的原则对于我们来说是非常重要的.或许有的人会觉得文中所说的是在DOS时代 ...
前端之HTML列表、表格及表单
文章目录 1.表格 table 1.1.创建表格 1.2.表格属性 1.3.表头单元格标签th 1.4.表格标题caption 1.5.合并单元格 1.5.1.合并单元格2种方式 1.5.2.合并单元 ...
前端学习（1807）：前端调试之列表伪类练习三
index.html <!DOCTYPE html> <html lang="en"><head> ...
前端学习（1806）：前端调试之列表伪类练习二
index.html <!DOCTYPE html> <html lang="en"><head> ...
前端学习（1805）：前端调试之列表伪类练习
index.html <!DOCTYPE html> <html lang="en"><head> ...
前端学习（1804）：前端调试之列表伪类
前端将List列表转化为树型结构（reduce函数）
主要用到了reduce()函数 for循环可以做到的事情reduce()都可以做到,甚至操作起来更加简单方便和高雅.reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的 ...
【前端性能优化】长列表优化
1 什么是长列表? 1.1 概念前端的业务开发中会遇到一些数据量较大且无法使用分页方式来加载的列表,我们一般把这种列表叫做长列表. 1.2 参考案例比如淘宝网的商品列表页,一个手机屏可以容纳10 ...

前端实现组织结构列表

竖向组织结构图实现

前端实现组织结构列表相关推荐

最新文章

热门文章