jOrgChart二叉树效果
引进文件:
<link rel="stylesheet" type="text/css" href="Public/com/jQrgChart/jquery.jOrgChart.css">
<script src="Public/com/jQrgChart/jquery.jOrgChart.js"></script>
HTML:
<div id='jOrgChart'></div>//容器
js:
//自己项目(动态添加,逐条添加)
<script type="text/javascript">
$(function(){
Getjiedian();
})
var arr = [];
function Getjiedian(){
$.get(location.href,function(data){
var showlist = $("<ul id='org' style='display:none'></ul>");
arr.push(data.info);
showall(arr, showlist);
$("#jOrgChart").append(showlist);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
dragAndDrop : false //设置是否可拖动
});
},"JSON")
}
function showall(infos, parent) {
$.each(infos, function(e,val) {
var li = $("<li class='li_id"+ val.id +"'></li>");
var str = "";
str += '<div class="tree" data-index="'+e+'" data-id='+val.id+'>';
str += '<div class="useImg">';
str += '<img class="middleY" src="'+val.headimgurl+'" alt="">';
str += '</div>';
str += '<p class="useName">'+val.nickname+'</p>';
str += '<p class="useNum">已审核:'+ val.num +'人</p>';
str += '</div>';
li.append("<div onclick='GetElse("+ val.id +")'>"+str+"</div>").append("<ul></ul>").appendTo(parent);
showall(val.list,$(li).children().eq(1));
});
} function GetElse(id){
var leng = $(".li_id" + id).children().eq(1).children().length;
if(leng == 0){
var vals = $(".li_id" + id).children().eq(1);
var data ={
'id':id
}
$.get("{:U('UserWx/jiedianfind')}",data,function(res){
var info = res.list;
$.each(info, function(e,val) {
var li = $("<li class='li_id"+ val.id +"'></li>");
var str = "";
str += '<div class="tree" data-index="'+e+'" data-id='+val.id+'>';
str += '<div class="useImg">';
str += '<img class="middleY" src="'+val.headimgurl+'" alt="">';
str += '</div>';
str += '<p class="useName">'+val.nickname+" "+' </p>';
str += '<p class="useNum">已审核:'+ val.num +'人</p>';
str += '</div>';
li.append("<div onclick='GetElse("+ val.id +")';>"+str+"</div>").append("<ul></ul>").appendTo(vals);
})
//重置显示容器
var htmls = $("#org");
$("#jOrgChart").html("");
$("#jOrgChart").append(htmls);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',
dragAndDrop : false
});
},"JSON")
}else if(leng == 1){ }else{ }
}
</script>
参考:https://www.cnblogs.com/liboxncg/p/6249752.html
json数据:
{
"data": [{
"id": 1,
"name": "企业主体信用得分",
"pid": null,
"childrens": [
{
"id": 2,
"name": "企业素质",
"pid": 1,
"childrens": [
{
"id": 5,
"name": "基本信息",
"pid": 2,
"childrens": [
{
"id": 10,
"name": "企业主体信息识别",
"pid": 5,
"childrens": [
]
},
{
"id": 11,
"name": "企业持续注册时间",
"pid": 5,
"childrens": [
]
},
{
"id": 12,
"name": "注册资本",
"pid": 5,
"childrens": [
]
}
]
},
{
"id": 6,
"name": "管理认证",
"pid": 2,
"childrens": [
{
"id": 13,
"name": "国际性管理认证",
"pid": 6,
"childrens": [
]
}
]
}
]
},
{
"id": 3,
"name": "履约记录",
"pid": 1,
"childrens": [
{
"id": 7,
"name": "税务执行情况",
"pid": 3,
"childrens": [
{
"id": 14,
"name": "是否按时缴纳税款",
"pid": 7,
"childrens": [
]
}
]
},
{
"id": 8,
"name": "网贷情况",
"pid": 3,
"childrens": [
{
"id": 15,
"name": "网贷逾期",
"pid": 8,
"childrens": [
]
}
]
}
]
},
{
"id": 4,
"name": "公共监督",
"pid": 1,
"childrens": [
{
"id": 9,
"name": "行政处罚",
"pid": 4,
"childrens": [
{
"id": 16,
"name": "处罚信息",
"pid": 9,
"childrens": [
]
}
]
}
]
}
]
}
]
}
<script type='text/javascript'>
$(function(){
//数据返回
$.ajax({
url: "test.json",
type: 'GET',
dataType: 'JSON',
data: {action: 'org_select'},
success: function(result){
var showlist = $("<ul id='org' style='display:none'></ul>");
showall(result.data, showlist);
$("#jOrgChart").append(showlist);
$("#org").jOrgChart( {
chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
dragAndDrop : false //设置是否可拖动
}); }
});
}); function showall(menu_list, parent) {
$.each(menu_list, function(index, val) {
if(val.childrens.length > 0){ var li = $("<li></li>");
li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
//递归显示
showall(val.childrens, $(li).children().eq(1));
}else{
$("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
}
}); } </script>
jOrgChart二叉树效果的更多相关文章
- BTree和B+Tree 简单区别
本篇作用于各种树之间的区别,非算法详细介绍,只是给我们这种非科班出身的一种大概的印象,现在网上更多是讲各种树的怎么实现的细节问题,本篇不涉及那么高深,如果详细了解可以查阅他人的资料,很多大神已经说的很 ...
- 关于Mongodb的全面总结
MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...
- 使用jOrgChart插件实现组织架构图的展示
项目要做组织架构图,要把它做成自上而下的树形结构. 一.说明 (1)通过后台查询数据库,生成树形数组结构,返回到前台. (2)需要引入的js插件和css文件: ①jquery.jOrgChart.cs ...
- PAT树_层序遍历叶节点、中序建树后序输出、AVL树的根、二叉树路径存在性判定、奇妙的完全二叉搜索树、最小堆路径、文件路由
03-树1. List Leaves (25) Given a tree, you are supposed to list all the leaves in the order of top do ...
- 《数据结构与算法分析》学习笔记(五)——二叉树
(一)查找二叉树ADT 1.二叉查找树ADT性质: 对于树中的每个节点X,它的左子树中所有关键字值都小于X的关键字值,而它的右子树值的关键字值都大于X的关键字值. 2.一些ADT的基本操作 结 ...
- python数据结构与算法——二叉树结构与遍历方法
先序遍历,中序遍历,后序遍历 ,区别在于三条核心语句的位置 层序遍历 采用队列的遍历操作第一次访问根,在访问根的左孩子,接着访问根的有孩子,然后下一层 自左向右一一访问同层的结点 # 先序遍历 # ...
- C语言实现二叉树-04版
二叉树,通常应当是研究其他一些复杂的数据结构的基础.因此,通常我们应该精通它,而不是了解:当然,可能并不是每个人都认同这种观点,甚至有些人认为理解数据结构就行了!根本没有必要去研究如何实现,因为大多数 ...
- C语言实现二叉树-03版
我们亲爱的项目经理真是有创意,他说你给我写得二叉树挺好的: 功能还算可以:插入节点,能够删除节点: 可是有时候我们只是需要查找树的某个节点是否存在: 所以我希望你能够给我一个find功能: 还有就是, ...
- C语言实现二叉树-02版
---恢复内容开始--- 昨天,提交完我们的二叉树项目后,今天早上项目经理早早给我打电话: 他说,小伙子干的不错.但是为什么你上面的insert是recusive的呢? 你难道不知道万一数据量大啦!那 ...
随机推荐
- DcotrineFixtureBundle学习
根据官方文档对Fixture进行学习 首先使用 composer require --dev doctrine/doctrine-fixtures-bundle 来导入扩展 之后注意,如果symfon ...
- linux下安装部署ansible
linux下安装部署ansible 介绍 Ansible是一种批量部署工具,现在运维人员用的最多的三种开源集中化管理工具有:puppet,saltstack,ansible,各有各的优缺点,其中sal ...
- bat入门--第一个bat文件
所谓的批处理就是从记事本开始进行的. 1.新建一个记事本文件, 2, 打开的记事本上敲入一行字:@echo off 意思:隐藏以下输入的代码(off改成on是打开代码显示). 3.再输入:echo h ...
- 转 InnoDB索引
原文: http://blog.codinglabs.org/articles/theory-of-mysql-index.html InnoDB索引实现 虽然InnoDB也使用B+Tree作为索引结 ...
- NetBeans GUI tests on Jenkins + Windows (转)
from http://forgetfulprogrammer.wordpress.com/tag/interact-with-desktop/ Running NetBeans applicatio ...
- :before和::before的区别
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素.伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示, ...
- Spring Boot2.1.3全局跨域
/** * 配置跨域访问 * * @author Terwer */ @Bean public WebMvcConfigurer corsConfigurer() { return new WebMv ...
- python中剔除字典重复项,可以使用集合(set)。
使用集合(set)剔除字典中的重复项(value). 1)具体例子: #甲乙丙丁使用的编程语言programming_languages = { '甲':'java', '乙':'python', ' ...
- nginx上通过ssl证书将http转发为https
环境:阿里云linux,ngnix 1.16.0 ,ssl证书,XXXX.jar 0.自行在阿里云上下载免费的ssl证书.里面有2个文件.key和pem后面要用到. 1.首先将项目在linux上跑起来 ...
- Git 提示fatal: remote origin already exists 错误解决办法
今天使用git 添加远程github仓库的时候提示错误:fatal: remote origin already exists. 最后找到解决办法如下: 1.先删除远程 Git 仓库 $ git re ...