项目需要对节点无限层级查看，大概捣鼓了下，以下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.简单网络拓扑图的折叠与展开的更多相关文章

  1. visjs使用小记-1.创建一个简单的网络拓扑图

    1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head> <title> ...

  2. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

  3. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  4. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  5. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  6. 矢量Chart图表嵌入HTML5网络拓扑图的应用

    使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...

  7. 快速开发基于 HTML5 网络拓扑图应用1

    今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...

  8. 基于 HTML5 Canvas 绘制的电信网络拓扑图

    电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...

  9. 快速创建 HTML5 Canvas 电信网络拓扑图

    前言 属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能 ...

随机推荐

  1. BestCoder Round #1 第一题 逃生

    // 等了好久,BESTCODER 终于出来了..像咋这样的毕业的人..就是去凑凑热闹// 弱校搞acm真是难,不过还是怪自己不够努力// 第一题是明显的拓扑排序,加了了个字典序限制而已// 用优先队 ...

  2. Java8中计算日期时间差

    一.简述 在Java8中,我们可以使用以下类来计算日期时间差异: 1.Period 2.Duration 3.ChronoUnit 二.Period类 主要是Period类方法getYears(),g ...

  3. 《DSP using MATLAB》示例Example7.9

    代码: wp = 0.2*pi; ws = 0.3*pi; As = 50; tr_width = ws - wp; M = ceil((As-7.95)/(2.285*tr_width) + 1 ) ...

  4. 获得消息的x，y的窗口内坐标（包括边框和titlebar高度

    rectWindow = D2D.GetWindowRect(self.hwnd)#窗口大小 rectClient = D2D.GetWindowRect(self.hwnd,True)#客户区大小 ...

  5. 使用C#和Java发送邮件（转载）

    using System.Net.Mail; using System.Net; public class EmailEntity { private MailMessage mm; /// < ...

  6. jekyll 安装使用

    1. 安装     条件: ruby gem 注意版本,同时建议使用国内的镜像 gem install jekyll bundler   2. 创建网站   jekyll new my-awesome ...

  7. C#机器学习插件 ---- AForge.NET

    目录 简介 主要架构 特点 学习之旅 简介 AForge.NET是一个专门为开发者和研究者基于C#框架设计的,这个框架提供了不同的类库和关于类库的资源,还有很多应用程序例子,包括计算机视觉与人工智能, ...

  8. PADS VBA 编写笔记

    PADS VBA 编写笔记 由于 PADS 的中编码不是 utf8 的,所以在编写时放到 PADS 中会出现乱码. 有时会使用中文注释,但是当以中文注释结尾时就会出现错误,于是就如果结尾是以英文就没问 ...

  9. [LeetCode系列]最大连续子列递归求解分析

    本文部分参考Discuss: LeetCode. 步骤1. 选择数组的中间元素. 最大子序列有两种可能: 包含此元素/不包含. 步骤2. 步骤2.1 如果最大子序列不包含中间元素, 就对左右子序列进行 ...

  10. java.lang.NoSuchFieldError: TRACE

    Exception in thread "main" java.lang.NoSuchFieldError: TRACE    at org.jboss.logging.Log4j ...