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. 轻松自动化---selenium-webdriver(python) (六)

    本节知识点: 操作对象: · click 点击对象 · send_keys 在对象上模拟按键输入 · clear 清除对象的内容,如果可以的话 WebElement  另一些常用方法: · text  ...

  2. 基于HT for Web矢量实现2D叶轮旋转

    之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转. 我们先来看下这个叶轮模型长什么样 从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们 ...

  3. 采用Kettle分页处理大数据量抽取任务

    作者:Grey 原文地址: http://greyzeng.com/2016/10/31/big-data-etl/ 需求: 将Oracle数据库中某张表历史数据导入MySQL的一张表里面. 源表(O ...

  4. 网络基础：NetBIOS

    网络基础小补. 利用 NetBIOS 名称与其他计算机通信 网络中的计算机之间必须知道IP地址后才能相互通信.但对人来说IP难以记忆,NetBIOS计算机名称比较容易记忆.当计算机使用 NetBIOS ...

  5. 基于MVC4+EasyUI的Web开发框架经验总结（5）--使用HTML编辑控件CKEditor和CKFinder

    Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...

  6. .net获取本机公网IP代码

    类的代码如下: using System; using System.Net; using System.Text.RegularExpressions; namespace Keleyi.Com { ...

  7. ms sql 2005和2008收缩日志的方法

    步骤1: 2005的sql 语句为:back up log 数据库名称 with no_log 目的:截断数据库日志 2008的sql 语句为:alter database 数据库名称 set rec ...

  8. EntityFramework中几种更改数据的方式

    首先声明个实体类,该实体类是EntityFrameWork自动生成的,对应数据表Test结构如下 public partial class Test { public int Id{ get; set ...

  9. 不可或缺 Windows Native (12) - C++: 引用类型

    [源码下载] 不可或缺 Windows Native (12) - C++: 引用类型 作者:webabcd 介绍不可或缺 Windows Native 之 C++ 引用类型 示例CppReferen ...

  10. 记一次ckeditor上传图片到服务器问题

    package com.util;import java.io.IOException; import java.io.PrintWriter; import java.util.List;impor ...