Atitit jOrgChart的使用 组织架构图css html
Atitit jOrgChart的使用 组织架构图css html
1. 项目要做组织架构图，要把它做成自上而下的树形结构，于是决定1
2. Html导入 以来的css js1
2.1. 数据来源 使用ul li格式，不是常见的json格式2
2.2. 显示targetdiv以及调用开始3
3. 显示效果3
4. 对于的dom结构4
5. 参考5
1. 项目要做组织架构图，要把它做成自上而下的树形结构，于是决定
（1）通过后台查询数据库，生成树形数组结构，返回到前台。
（2）使用jOrgChart插件，根据返回的数据将其子节点加入到相应的<li></li>中。
首先，我们的数据表应该要有 id（节点），pid（父节点的id），name的字段，
那么我们要把这个数组转为树形数组结构，即将各个元素放在 pid 父类元素的 childrens字段中，下面就是简单生成树形数组的代码，测试数组如下：
点击节点收起subnote，默认支持
设置默认为收起状态 <li class="collapsed">Chocolate
作者:: ★(attilax)>>> 绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 汉字名：艾龙， EMAIL:[email protected]
转载请注明来源： http://blog.csdn.net/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