visjs使用小记-3.简单网络拓扑图的折叠与展开
项目需要对节点无限层级查看，大概捣鼓了下，以下demo代码可根据节点的层级顺序，通过节点双击简单实现节点的折叠与展开
<!doctype html>
<html>
<head>
<title>Network</title>
<script type="text/javascript" src="http://visjs.org/dist/vis.js"></script>
<link href="http://visjs.org/dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body> <p>
创建一个简单的网络拓扑图，双击实现节点的折叠与收缩.
</p> <div id="mynetwork"></div><!-- 用户存放拓扑图的容器--> <script type="text/javascript"> //定义需要生成的节点
var allnodes = [
{id: 1, label: 'Node 1', title: 'I have a popup 1!', level: 1, pid: 0, subids: [2, 3, 4]},
{id: 2, label: 'Node 2', title: 'I have a popup 2!', level: 2, pid: 1, subids: [5, 6]},
{id: 3, label: 'Node 3', title: 'I have a popup 3!', level: 2, pid: 1, subids: [7]},
{id: 4, label: 'Node 4', title: 'I have a popup 4!', level: 2, pid: 1, subids: [8]},
{id: 5, label: 'Node 5', title: 'I have a popup 5!', level: 3, pid: 2},
{id: 6, label: 'Node 6', title: 'I have a popup 6!', level: 3, pid: 2},
{id: 7, label: 'Node 7', title: 'I have a popup 7!', level: 3, pid: 3},
{id: 8, label: 'Node 8', title: 'I have a popup 8!', level: 3, pid: 4, subids: [9, 10]},
{id: 9, label: 'Node 9', title: 'I have a popup 9!', level: 4, pid: 8},
{id: 10, label: 'Node 10', title: 'I have a popup 10!', level: 4, pid: 8}
];
//定义节点连接线
var alledges = [
{id: '1_2', from: 1, to: 2, title: 'test12!'},
{id: '1_3', from: 1, to: 3, title: 'test13!'},
{id: '1_4', from: 1, to: 4, title: 'test14!'},
{id: '2_5', from: 2, to: 5, title: 'test25!'},
{id: '2_6', from: 2, to: 6, title: 'test26!'},
{id: '3_7', from: 3, to: 7, title: 'test37!'},
{id: '4_8', from: 4, to: 8, title: 'test48!'},
{id: '8_9', from: 8, to: 9, title: 'test89!'},
{id: '8_10', from: 8, to: 10, title: 'test8to10!'}
];
// 创建节点对象
var nodes = new vis.DataSet(allnodes);
// 创建连线对象
var edges = new vis.DataSet(alledges);
// 创建一个网络拓扑图
var container = document.getElementById('mynetwork');
var data = {nodes: nodes, edges: edges};
var options = {
interaction: {hover: true},
layout: {
hierarchical: {direction: 'UD', sortMethod: 'hubsize'}
//上下级结构显示,当定义上下级时候需要自定义层级显示时，需要对所有节点进行level属性进行定义
},
};
var network = new vis.Network(container, data, options);
var nodes_data = network.body.data.nodes._data;
network.on("doubleClick", function(params) {//双击事件
if (params.nodes.length != 0) {//确定为节点双击事件
var click_node_id = params.nodes[0];
remove_all_sub_nodes(click_node_id);
}
}); //删除下级所有节点
function remove_all_sub_nodes(node_id) {
var sub_nodes = get_directly_sub_nodes(node_id);
if (sub_nodes.length == 0) {//当前点击的为叶子节点
//判断是否有下级节点
if (typeof (allnodes[node_id - 1]['subids']) != 'undefined') {
$.each(allnodes[node_id - 1]['subids'], function(index, item) {
nodes.add(allnodes[item - 1]);
edges.add({id: node_id + '_' + item, from: node_id, to: item});
});
} else {
alert('当前为叶子节点');
}
} else {
$.each(sub_nodes, function(index, item) {
var sub_sub_nodes = get_directly_sub_nodes(item);
if (sub_sub_nodes.length == 0) {
nodes.remove({id: item});
edges.remove({id: node_id + '_' + item});
} else {
remove_all_sub_nodes(item);
}
nodes.remove({id: item});
edges.remove({id: node_id + '_' + item});
});
}
} //获取某节点直属下级节点
function get_directly_sub_nodes(node_id) {
var return_nodes = [];
var connectedNodes = network.getConnectedNodes(node_id);//获取所有连接节点
$.each(connectedNodes, function(index, item) {
if (item != allnodes[node_id - 1]['pid']) {//当前节点的父节点 ，不操作
return_nodes.push(item);
}
});
return return_nodes;
}
</script> </body>
</html>
visjs使用小记-3.简单网络拓扑图的折叠与展开的更多相关文章
- visjs使用小记-1.创建一个简单的网络拓扑图
1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head> <title> ...
- 快速开发基于 HTML5 网络拓扑图应用
采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web ...
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- 矢量Chart图表嵌入HTML5网络拓扑图的应用
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...
- 快速开发基于 HTML5 网络拓扑图应用1
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...
- 基于 HTML5 Canvas 绘制的电信网络拓扑图
电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...
- 快速创建 HTML5 Canvas 电信网络拓扑图
前言 属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能 ...
随机推荐
- 解决asp.net上传文件时文件太大导致的错误
即使在web.config中添加了节点和设置依然是不行的,还是报文件太大的错误, <httpModules> <add name="UploadHttpModu ...
- DBUtils 增删改查例子
sql CREATE TABLE [dbo].[Person] ( , ) NOT NULL , ) COLLATE Chinese_PRC_CI_AS NULL , [age] [int] NULL ...
- [欢乐赛]班服 状压DP
班服 (shirt.pas/.c/.cpp) 时间限制:1s:内存限制 128MB 题目描述: 要开运动会了,神犇学校的n个班级要选班服,班服共有100种样式,编号1~100.现在每个班都挑出了一些样 ...
- Java里的常用运算符及其优先级顺序
知道了八种基本数据类型后,在使用中弄清运算符的优先级是很有必要的.具体如下图: 这里需要注意的是,强制类型转换的优先级是位于乘除前面而处于单目运算符后面的,这是比较容易出错的地方.比如用Math.R ...
- 使用BeanShell 对比取出来的值
描述: 使用BeanShell 对比取出来的值,如不一致,报错 步骤一: 使用json Extractor后置处理器,取出"登入成功" 使用BeanS hell断言: 语法: if ...
- TCP之二：TCP的三次握手与四次分手
一.TCP是什么? 具体的关于TCP是什么,我不打算详细的说了:当你看到这篇文章时,我想你也知道TCP的概念了,想要更深入的了解TCP的工作,我们就继续.它只是一个超级麻烦的协议,而它又是互联网的基础 ...
- C++类够做函数初始化列表
构造函数初始化列表以一个冒号开始,接着是以逗号分隔的数据成员列表,每个数据成员后面跟一个放在括号中的初始化式.例如: class CExample{ public: int a; float b; C ...
- (转) Docker EE/Docker CE简介与版本规划
随着Docker的不断流行与发展,docker公司(或称为组织)也开启了商业化之路,Docker 从 17.03版本之后分为 CE(Community Edition) 和 EE(Enterprise ...
- 安装NFS服务，并挂载到开发板
1.前言 由于嵌入式linux开发大多数使用的是交叉编译环境,难免很频繁的将文件在开发板和PC环境之间传递,最方便的当然是网络传递了,可以使用FTP,以及挂载NFS两种方式了,显然后者更为方便了. 2 ...
- 转-----FPGA工程师：持守梦想or屈于现实
昨晚无意间看到一段新闻频道对最近炒得火热的“史上最年轻教授”的专访,倒是他的一位同学对于梦想的“现实版”解说颇有些耐人寻味.大体意思是说“拼了老命考上一所梦寐以求的大学,父母辛辛苦苦交了学费,我们却 ...