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: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="data: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

Atitit jOrgChart的使用  组织架构图css html的更多相关文章

  1. iphone开发 IOS 组织架构图

    转载自 :http://blog.csdn.net/mashi321323/article/details/18267719   登录|注册     mashi321323的专栏       目录视图 ...

  2. 使用jOrgChart插件， 异步加载生成组织架构图

    jOrgChart插件是一个用来实现组织结构图的Jquery的插件- 一.特点 1.支持拖拽修改子节点: 2.支持节点缩放展示: 3.方便修改css定义样式: 4.超轻量型: 5.兼容性好,基本支持所 ...

  3. 前端vue2-org-tree实现精美组织架构图

    最近遇到开发组织架构的需求,与以往开发的组织架构不同,不光要展示人名,还要显示职务(或者子公司名称).对应的头像等,并且要考虑,如果用户未上传头像,需使用默认头像(男.女.中性),(⊙o⊙)…要尊重尊 ...

  4. OC 框架组织架构图

  5. 使用jOrgChart插件实现组织架构图的展示

    项目要做组织架构图,要把它做成自上而下的树形结构. 一.说明 (1)通过后台查询数据库,生成树形数组结构,返回到前台. (2)需要引入的js插件和css文件: ①jquery.jOrgChart.cs ...

  6. js前端使用jOrgChart插件实现组织架构图的展示

    项目要做组织架构图,要把它做成自上而下的树形结构. 需要购买阿里云产品的,可以点击此链接购买,有红包优惠哦: https://promotion.aliyun.com/ntms/yunparter/i ...

  7. Django+zTree构建组织架构树

    树,因其清晰明了的展现形式而被广泛的使用 日常的开发过程中我们需要经常与"树"打交道,例如公司的组织架构树.服务器的项目归属树,管理后台侧边树等等,本篇文章介绍关于树的两个内容 多 ...

  8. Atitit常见的标准化组织与规范数量jcp ecma iso

    Atitit常见的标准化组织与规范数量jcp ecma iso 1. 常见的标准化组织1 1.1. 重要的基金会apache1 1.2. 美国国家标准学会(American NationalStand ...

  9. 飞达资讯App总体介绍及关系架构图

    飞达资讯App总体介绍: 下图为飞达资讯App的关系架构图: 该App关系架构图所需的图片云盘链接地址:http://pan.baidu.com/s/1gfHIe4b 提取密码:x1nr 该App的云 ...

随机推荐

  1. Waves – 赞！超炫交互体验的点击动画效果

    Waves 点击效果的灵感来自于谷歌的材料设计,很容易使用.只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了.采用 touchstart 与 tou ...

  2. 20个漂亮 CSS3 按钮效果及优秀的制作教程

    在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...

  3. javascript学习4

    JavaScript Date(日期)对象 日期对象用于处理日期和时间. JavaScript Date(日期)对象 实例 返回当日的日期和时间 如何使用 Date() 方法或者当日的日期. getT ...

  4. Windows Azure Platform Introduction (11) 了解Org ID、Windows Azure订阅、账户

    <Windows Azure Platform 系列文章目录> 了解和掌握Windows Azure相关的基础知识是非常重要的. 问题1:什么叫做Org ID Org ID是Azure C ...

  5. [New Portal]Windows Azure Virtual Machine (14) 在本地制作数据文件VHD并上传至Azure(1)

    <Windows Azure Platform 系列文章目录> 之前的内容里,我介绍了如何将本地的Server 2012中文版 VHD上传至Windows Azure,并创建基于该Serv ...

  6. CSS3 介绍

    什么是CSS3 CSS即层叠样式表(Cascading Stylesheet). 在网页制作时采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码做 ...

  7. CP/IP，SPDY，WebSocket 三者之间的关系

    按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP是应用层的协议.在这三者之间,SPDY和WebSocket都是与HTTP相关的协议,而TCP是HTTP底层的协议.一.HTTP的 ...

  8. C#深入.NET平台的软件系统分层开发

    今天我们来讲讲分层开发,你从标题能不能简单的认识一下什么是分层呢? 不懂也没关系,接下来我来给你讲讲. 第一章 软件系统的分层开发 (1)其实分层模式可以这样定义:将解决方案中功能不同的模块分到不同的 ...

  9. 【转载】各浏览器CSS兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...

  10. 会员管理系统的设计和开发（2）-- RDLC报表的设计及动态加载

    在上篇<会员管理系统的设计和开发(1)>介绍了关于会员系统的一些总体设计思路和要点,经过一段时间开发,软件终于完成并发布.在这期间,碰到了不少技术难点,并积累了不少开发心得和经验,本篇继续 ...