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. 如何在Notepad++ 中成功地安装Emmet 插件

    对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...

  2. 可视化工具solo show-----Prefuse自带例子GraphView讲解

    2014.10.15日以来的一个月,挤破了头.跑断了腿.伤透了心.吃够了全国最大餐饮连锁店——沙县小吃.其中酸甜苦辣,绝不是三言两语能够说得清道的明的.校招的兄弟姐妹们,你们懂得…… 体会最深的一句话 ...

  3. Android SDK Manager无法更新的解决

    只需要配置一下hosts文件,在文件的末尾添加下面一句: 74.125.237.1 dl-ssl.google.com windows系统中hosts文件的位置为:C:\Windows\System3 ...

  4. Git学习笔记（二）

    一.创建远程仓库(GitHub) 1.GitHub网站地址:https://github.com/,这个网站就是提供Git仓库托管服务的,所以,只要注册一个GitHub账号,就可以免费获得Git远程仓 ...

  5. iOS滤镜实现之Nashville【instagram】

    Nashville是Instagram众多滤镜中最惊艳的一款,独特的奶昔色调赋予照片童话般的唯美感觉.适用范围:营造浪漫唯美的感觉.的确如此啊有2张输入图像 顶点着色有2组坐标NSString *co ...

  6. 六、GAIA

    1.      GAIA CSR GAIA (Generic Application Interface Architecture)提供了一个端到端的,与主机无关的生态系统来实现主机应用程序对设备的功 ...

  7. 数据结构(C语言第2版)----时间复杂度和单链表

    马上要到校招了,复习下相关的基础知识. 时间复杂度是什么? 官方解释: 算法的执行时间需要依据算法所编制的程序在计算机上于运行时所消耗的时间来度量.在算法中可以使用基本的语句的执行次数作为算法的时间复 ...

  8. C# CGI程序

    一.控制面板—>程序和功能—>打开或关闭Windows功能 把相关的功能勾上,点“确定” 二.新建一个网站,配置ISAPI和CGI限制.处理程序映射 三.CGI控制台应用程序代码: usi ...

  9. 不可或缺 Windows Native 系列文章索引

    [源码下载] 不可或缺 Windows Native 系列文章索引 作者:webabcd 1.不可或缺 Windows Native (1) - C 语言: hello c 介绍不可或缺 Window ...

  10. 容器--HashMap

    一.前言 看了下上一篇博客已经是半个月前,将近20天前了,很惭愧没有坚持下来,这期间主要是受奥运会和王宝强事件的影响,另外加上HashMap中关于rehash的实现比较不好理解,所以就一拖再拖.如果能 ...