Atitit jOrgChart的使用 組織架構圖css html
1. 項目要做組織架構圖，要把它做成自上而下的樹形結構，於是決定1
2.1. 數據來源 使用ul li格式，不是常見的json格式2
1. 項目要做組織架構圖，要把它做成自上而下的樹形結構，於是決定
（1）通過后台查詢數據庫，生成樹形數組結構，返回到前台。
（2）使用jOrgChart插件，根據返回的數據將其子節點加入到相應的<li></li>中。
首先，我們的數據表應該要有 id（節點），pid（父節點的id），name的字段，
那么我們要把這個數組轉為樹形數組結構，即將各個元素放在 pid 父類元素的 childrens字段中，下面就是簡單生成樹形數組的代碼，測試數組如下：
點擊節點收起subnote，默認支持
設置默認為收起狀態 <li class="collapsed">Chocolate
作者:: ★(attilax)>>> 綽號:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 漢字名：艾龍， EMAIL:1466519819@qq.com
轉載請注明來源： http://www.cnblogs.com/attilax/
2. Html導入 以來的css js
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<link rel="stylesheet" href='bootstrap.min.css'/>
<link rel="stylesheet" href='jquery.jOrgChart.css'/>
<link rel="stylesheet" type="text/css" href="../com.atilax.frmwk/jOrgChart-master/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../com.atilax.frmwk/jOrgChart-master/jquery.jOrgChart.css">
<style type="text/css">
.node {
color: white;
}
</style>
<script src="../com.atilax.frmwk/jquery-1.11.3.js"></script>
<script src="../com.atilax.frmwk/jOrgChart-master/jquery.jOrgChart.js"></script>
</head>
2.1. 數據來源 使用ul li格式，不是常見的json格式
Html格式的優點是可以放入展示內容，比如img登
<ul id="orgdata" style="display:none">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
<a href="http://wesnolte.com" target="_blank">Click me</a>
<ul>
<li>Pumpkin</li>
<li>
<a href="http://tquila.com" target="_blank">Aubergine</a>
<p>A link and paragraph is all we need.</p>
</li>
</ul>
</li>
<li class="fruit">Fruit
<ul>
<li>Apple
<ul>
<li>Granny Smith</li>
</ul>
</li>
<li>Berries
<ul>
<li>Blueberry</li>
<li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
<li>Cucumber</li>
</ul>
</li>
</ul>
</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>
2.2. 顯示targetdiv以及調用開始
<div id="show_div" class="orgChart"></div>
<div class="node" id="nodxxx"></div>
<script>
jQuery(document).ready(function() {
$("#orgdata").jOrgChart({
chartElement : '#show_div',
dragAndDrop : true
});
});
</script>
3. 顯示效果
4. 對於的dom結構
5. 參考
使用jOrgChart插件， 異步加載生成組織架構圖 - 讀書小記 - 博客頻道 - CSDN.NET.html