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. SQLServer学习笔记系列6

    一.写在前面的话 时间是我们每个人都特别熟悉的,但是到底它是什么,用什么来衡量,可能很多人会愣在那里.时间可以见证一切,也可以消磨一切,那些过往的点点滴滴可思可忆.回想往年清明节过后,在家乡的晚上总能 ...

  2. 百度统计接口demo中错误

    百度统计接口中的demo(PHP版本)下载下来配置后运行出错,应该是编写demo时用的php版本比较低吧,作如下几处修改就好了 一:把CURLOPT_SSL_VERIFYHOST的值改为2,因为1版本 ...

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

    <Windows Azure Platform 系列文章目录> 在上一章内容里,我们已经将包含有OFFICE2013 ISO安装文件的VHD上传至Azure Blob Storage中了. ...

  4. JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...

  5. win10系统下点击关机却自动重启的问题解决思路

    第一步.进入win10系统后,我们点击开始菜单上鼠标右键,选择控制面板   第二步.找到电源选项,点击进去(如何没发现,点击右上角查看方式,更换为小图标)   第三步.点击选择关闭盖子的功能   第四 ...

  6. Fiddler 抓取手机APP数据包

    Fiddler是一个调试代理,下载地址http://www.telerik.com/download/fiddler 下载安装运行后,查出运行机器的IP,手机连接同一网域内的WIFI,手机WIFI连接 ...

  7. PHP多种形式发送邮件

    1. 使用 mail() 函数 没什么好讲的,就是使用系统自带的smtp系统来发送,一般是使用sendmail来发.这个按照各个系统不同而定.使用参考手册. 2. 使用管道的形式 昨天刚测试成功,使用 ...

  8. Redis系列一之数据结构

    一.Redis简介 redis是一个高性能的key-value非关系数据库,它可以存键(key)与5种不同类型的值(value)之间的映射(mapping),支持存储的value类型包括:String ...

  9. 扩展WPF的DataGrid按方向键移动焦点

    WPF的DataGrid默认的移动行为如下: (1)当前单元格不处于编辑状态时可使用方向键移动焦点. (2)当前单元格处于编辑状态时不可使用方向键移动焦点;按Enter键,当前单元格退出编辑状态,焦点 ...

  10. sql查询重复记录和from子查询

    select name from (SELECT name,count(name) as countFROM Table WHERE (OrgUUId = (select top 1 uuid fro ...