前端实现组织结构列表
来源：互联网 发布：腾讯软件中心 编辑：程序博客网 时间：2024/06/05 06:27
竖向组织结构图实现
修改源码如下：
(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> </td>").addClass("line right downTd"); $tbody.find("tr").eq(i).append($down); }else{ var $top = $("<td> </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>再附上横向组织结构代码：
阅读全文
0 0
- 前端实现组织结构列表
- 【web前端】前端项目组织结构
- 前端架构，前端架构组织结构，目录结构架构
- 前端AngularJS,项目的组织结构
- SharePoint 用递归实现组织结构 C#
- JavaScrip实现前端列表分页
- 组织结构
- 组织结构
- 前端页面实现树形结构
- 组织结构树形结构
- Django前端实现列表分页显示
- 前端组织架构目录
- OpenJWeb快速开发平台组织结构继承权限的实现
- jquery+zTree+colorbox 实现弹出框内组织结构树
- memcache php 缓存父子节点树 部门组织结构 省市地区下拉列表 常用信息
- 使用ztree插件实现前端树状结构
- 主要组织结构
- Shark数据模型--组织结构
- 2017年初你绝对想尝试的25个新安卓库
- Linux 多线程编程（1）
- 微信小程序中一些有用的组件总结
- 快速入手开源日志分析系统logstash
- Highcharts学习小计之决策分析
- 前端实现组织结构列表
- 奇异的家庭
- highCharts去掉图表官网标识链接和导出按钮
- Google Guava (14.0) Part2
- 2017省市区最新编码（依据国家统计局最新数据生成）
- 【Unet】Unet Networked Events 事件同步
- https://biendata.com/软件编程大赛
- 大数据下基于Tensorflow框架的深度学习示例教程
- 二叉树中某种的路径
