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個配置選項：
- chartElement – 用於指定的HTML元素要添加組織結構圖的標記。[default=’body’]
- depth – 告訴代碼該解析的深度。默認值為“1”，它指示它要解析它的1999。 [default=-1]
- chartClass – 分配給生成標記的樣式類的名稱。[default=’jOrgChart’]
- 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>
