Atitit jOrgChart的使用 组织架构图css html
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
相关文章
- Web入门者必看的HTML代码编写的30条军规
- HTML/HTML5 知识点思维导图
- Html,Css,Javascript及其他的注释方法详解
- (X)HTML嵌套规则
- html javascript读取 文件内容
- 前端学习 -- Html&Css -- ie6 png 背景问题
- [HTML] Change an HTML5 input's placeholder color with CSS
- JS编辑器获取选择内容的HTML多浏览器兼容性写法(支持Chorme、Firefox)
- 前端学习 -- Html&Css -- 框架集
- [CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)
- [HTML] Change an HTML5 input's placeholder color with CSS
- [HTML/CSS]margin属性用法
- HTML、CSS从零开始 浏览器兼容
- Atitit.html css 浏览器原理理论概论导论attilax总结
- Atitit jOrgChart的使用 组织架构图css html
- HTML+CSS+jquery代码实例:水波纹效果与纯HTML CSS和jquery(拿来就能用)
- 01【html和css】7/10
- IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
- html+css+js实现时钟
- 【HTML+CSS】浅谈:相对定位与绝对定位
- HTML+CSS纯干货就业前基础到精通系统学习2016/9/3
- html 和 css 学习
- 如何在html中做圆角矩形和 只有右边的"分隔线"
- python 反扒技巧 爬虫失败的原因分析 html的学习 css java html dom bs4 xpath selenium js混淆加密 反混淆 ajaxs
- js+html+css简单的互动功能页面(2015知道几乎尖笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- JavaScript(20)jQuery HTML 加入和删除元素
- JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)
- 【前端面试题——html/css篇】
- 实训-利用HTML+CSS制作某米官网首页
- HTML+CSS登录页面