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. [转载]PhotoShop性能优化

    现在随着Photoshop版本越来越高功能也越来越强大,而往往强大的功能需要电脑有好的配置运行,比如HDR.图像合成或者3D和视频等类似的功能,还有处理比较大尺寸的图像时,如果电脑配置不够强往往非常卡 ...

  2. StreamHelper

    public static MemoryStream CreateMemoryStreamFromBytes(byte[] inputData) { if (inputData == null || ...

  3. UsefulSQL

    FindObject: ---在当前Server上找某某object,注意只需修改"要找的object"就可以使用EXEC sp_MSforeachdb 'use ? ;IF EX ...

  4. MD5编码工具类 MD5Code.java

    代码如下: package com.util; /** * MD5编码工具类 * http://www.cnblogs.com/sosoft/ */ public class MD5Code { st ...

  5. 微信--获取access_token

    今天,终于鼓足勇气,来到这片圣地,迎来人生新的开始. 第一次...... 最近做微信公众号,记录一下,仅供参看. 关于access_token微信公众号有相关说明: access_token是公众号的 ...

  6. Java NIO：NIO概述

    Java NIO:NIO概述 在上一篇博文中讲述了几种IO模型,现在我们开始进入Java NIO编程主题.NIO是Java 4里面提供的新的API,目的是用来解决传统IO的问题.本文下面分别从Java ...

  7. Mysql 大小写问题

    今天发布程序的时候,日志报错找不到表,但是系统中已经存在表,最后发现是sql大小写的问题,mysql默认设置导致这些执行失败. 1.用ROOT登录,修改/etc/my.cnf 2.在[mysqld]下 ...

  8. 同样的MVC,不同的实现方法(Spring MVC .Net MVC)

    由于工作需要,最近将Net的MVC又重新好好的学习了一遍.学习教材是博客园里的大神的作品<ASP.NET MVC5框架揭秘>. <ASP.NET MVC5框架揭秘>这本书,说了 ...

  9. 使用ActivityManager实现进程管理

    Android中使用ActivityManager可以获得进程信息,并对进程进行管理,如结束进程等.本文使用ActivityManager获得进程列表,并结束选中的进程. 首先,看看布局文件. < ...

  10. ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️html，js随笔。❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

    a标签本身的文字居中. a{ display:block; text-align:center; } 设置div1在另一个div2里居中,(写了左边margin 就别写右边了不然ie6有毛病,当然本身 ...