1.orgchart插件:

github地址:https://github.com/dabeng/OrgChart

2.前端代码:

//1.加载树形数据:ajax请求获取json格式的数据(flag参数可以无视,我自己的业务逻辑需要)
function setTreeInfo(flag){
$('#chart-container').empty();
$.ajax({
url: "clan/getAllClanInfo.action",
type: "POST",
dataType: "json",
success:function (res) {
     //开始加载家谱图
setTreeView(res.jiclan[0], flag);
console.log("数据加载成功!");
},
error: function(){
console.log("加载数据异常!");
}
});
} //2.加载树形结构
function setTreeView(dataJson, flag){
//orgchart的初始化参数可以去github官方看文档,比较简单
jiclan = $('#chart-container').orgchart({
'data' : dataJson,
'pan': false,
'zoom': false,
'zoominLimit': 3,
'zoomoutLimit': 0.5,
'toggleSiblingsResp': true,
'draggable': false,
'direction' : 'l2r',
'exportButton': true,
'exportFilename': 'XX家谱',
'exportFileextension': 'png',
'nodeTemplate': setNodeTemplate
}); //当家谱加载完成后执行,这个函数与家谱图加载已经无关了,执行此函数之前已经完成了家谱图的生成;
// orgchartCompleted(flag);
} //3.设定树形模板。这个是重点,对于每个节点的生成样式与内容都在这里进行控制
function setNodeTemplate(data){
var str = "";
//如果为男性
if(data.sex == "0"){
//是否已经结婚
if(data.wifeName != null && data.wifeName != ""){
str += '<div class="title clan-man">'+data.name+'</div>' ;
str += '<div class="content clan-wife">'+data.wifeName+'</div>';
//下面这一行是为了加载每个节点上面的三个按钮,可以进行查询,修改,增加等操作
str += "<div class='opBtns display-none'>" +
"<i class='clan-btn clan-dtalBtn'></i>" +
"<i class='clan-btn clan-editBtn'></i>" +
"<i class='clan-btn clan-addChildBtn'></i>" +
"</div>";
}else{
str += '<div class="title clan-man">'+data.name+'</div>' ;
str += '<div class="content clan-single"></div>';
str += "<div class='opBtns display-none'>" +
"<i class='clan-btn clan-dtalBtn'></i>" +
"<i class='clan-btn clan-editBtn'></i>" +
"</div>";
}
}else{
str += '<div class="title clan-woman">'+data.name+'</div>' ;
str += '<div class="content clan-single"></div>';
str += "<div class='opBtns display-none'>" +
"<i class='clan-btn clan-dtalBtn'></i>" +
"<i class='clan-btn clan-editBtn'></i>" +
"</div>";
}
return str;
}

3.效果图:

下图只是家谱图中的一部分,我这个家谱一次加载进一百三十多个节点,没有性能问题。

使用OrgChart插件生成家谱组织结构图的更多相关文章

  1. 由cobertura插件生成测试覆盖率报告

    由于cobertura已经集成到maven中,所以可以很方便的直接调用此插件生成报告: 直接运行命令:mvn cobertura:cobertura 就可以直接生成测试报告了. 下面是截图:

  2. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  3. rpc框架: thrift/avro/protobuf 之maven插件生成java类

    thrift.avro.probobuf 这几个rpc框架的基本思想都差不多,先定义IDL文件,然后由各自的编译器(或maven插件)生成目标语言的源代码,但是,根据idl生成源代码这件事,如果每次都 ...

  4. Jboot使用appassembler-maven-plugin插件生成启动脚本

    appassembler-maven-plugin介绍: 使用appassembler-maven-plugin插件可自动生成跨平台的启动脚本,可省去手工写脚本的麻烦,而且还可以生成jsw的后台运行程 ...

  5. hadoop eclipse插件生成

    hadoop eclipse插件生成 做了一年的hadoop开发.还没有自动生成过eclipse插件,一直都是在网上下载别人的用,今天有时间,就把这段遗憾补回来,自己生成一下,废话不说,開始了. 本文 ...

  6. Windows环境下教你用Eclipse ADT 插件生成.h/.so文件,Java下调用JNI,轻松学习JNI

    准备工作:Eclipse ADT IDE 开发工具,NDK .Java 环境,博主的配置是:Windows x86 , ADT Build: v22.3.0-887826 , JAVA 1.7, ND ...

  7. Mybatis框架(9)---Mybatis自定义插件生成雪花ID做为表主键项目

    Mybatis自定义插件生成雪花ID做为主键项目 先附上项目项目GitHub地址 spring-boot-mybatis-interceptor 有关Mybatis雪花ID主键插件前面写了两篇博客作为 ...

  8. jQuery.qrcode二维码插件生成网页二维码

    如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了.但如果是地址不固定需要根据页面来生成的话.就有两种做法,一个是后端根据页面做一个动态的二维码.一种是前端使用插件生成. ...

  9. SpringBoot--Easycode、mybatisX插件生成entity,controller,service,dao,mapper IDEA版 项目提效神器

    一.介绍 Easycode是idea的一个插件,可以直接对数据的表生成entity,controller,service,dao,mapper,无需任何编码,简单而强大. MybatisX 是一款基于 ...

随机推荐

  1. Cocos2d-js 开发记录:骨骼动画载入

    不得不说cocos2d-js的文档实在是少,骨骼动画的载入和C++版本的好像还有些不同不能直接依样画葫芦. 一个由cocos studio编辑生成的骨骼动画一般会包含如下几个文件: .ExportJs ...

  2. thinkphp下判断状态值语法

    在thinkphp框架下我们经常会用到状态值的判断:但是这样写会引起语法错误. <div> <if condition="{$res.status} eq '0'" ...

  3. Object.preventExtensions()使用技巧

    Object.preventExtensions() 方法让一个对象变的不可扩展,也就是永远不能再添加新的属性. // Object.preventExtensions将原对象变的不可扩展,并且返回原 ...

  4. JavaScript练习笔记整理·1 - 6.23

    练习平台Codewars地址:https://www.codewars.com/ 欢迎和大家一起来讨论~╭( ・ㅂ・)و ̑̑   基础练习(1):   我的解答为: class SmallestIn ...

  5. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  6. redis在linux设置密码

    redis默认是没有密码的,如果需要设置可以这样设置. 1.找到本机的/etc/redis.conf 文件,找到如下行 #requirepass foobared 去掉前面的密码,并自己设置密码 re ...

  7. Linux ->> Ubuntu 14.04 LTE下配置SSH免密码登录

    首先用apt-get命令安装SSH jerry@ubuntu:~$ sudo apt-get install ssh [sudo] password for jerry: Reading packag ...

  8. Oracle GoldenGate 详解

    一.Oracle GoldenGate介绍 GoldenGate软件是一种基于日志的结构化数据复制软件.GoldenGate 能够实现大量交易数据的实时捕捉.变换和投递,实现源数据库与目标数据库的数据 ...

  9. l2tp over ipsec

    搭建教程: 转自: https://segmentfault.com/a/1190000006125737 http://www.wangyuxiong.com/blog/ti-yan-qiang-w ...

  10. DedeCms织梦后台管理员密码修改和忘记重置方法

    方法/步骤 打开dede_admin数据表: 进入你的MYSQL后台,然后在你的数据库名中,找到dede_admin这项如图,pwd下的值就是你的密码,织梦密码采取的是MD5加密,破解麻烦而且没有必要 ...