项目需要对节点无限层级查看，大概捣鼓了下，以下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. jquery ajax 超时设置

    自:jquery ajax超时设置 var ajaxTimeoutTest = $.ajax({ url:'',  //请求的URL timeout : 1000, //超时时间设置,单位毫秒 typ ...

  2. Java Garbage Collection

    在C/C++中,需要自己负责object的creation 和 destruction. 如果忘记了destruction, 就容易出现OutOfMemoryErrors. Java中会有GC直接处理 ...

  3. caddy quic 协议试用&& 几个问题

    备注:    caddy  具体的安装就不介绍,quic 协议也不介绍了   1. 启用协议,比较简单 /usr/local/bin/caddy -log stdout -quic -conf=/et ...

  4. vertica从其它表迁移数据到新表（insert into 语句使用方法实例）

    版权声明:本文为博主原创文章.博主同意自由转载. https://blog.csdn.net/tx18/article/details/26585649 #例:迁移微博用户数据. 因为源表weiboF ...

  5. [LeetCode系列]组合和枚举问题

    给定一列数(未排序)和一个目标值, 找出所有可能的组合和等于目标值的组合, 数组中的数可以重复使用. 算法思路: 使用递归. 对数组排序, 从小到大; 令i = 起始下标(初始为0), 对于每一个数, ...

  6. RK3288 查看ddr频率

    转载请注明出处:https://www.cnblogs.com/lialong1st/p/8515135.html RK3288 查看 ddr 当前频率的方式有两种,第一种是通过 adb 查看,第二种 ...

  7. linux性能监控——CPU、Memory、IO、Network

    一.CPU 1.良好状态指标 CPU利用率:User Time <= 70%,System Time <= 35%,User Time + System Time <= 70%. 上 ...

  8. TransportClient操作详解

    Elasticsearch JAVA操作有三种客户端: 1.TransportClient 2.JestClient 3.RestClient 还有种是2.3中有的NodeClient,在5.5.1中 ...

  9. eclipse 创建一个java项目 运行

    五.使用Eclipse 1)第一次打开需要设置工作环境,你可以指定工作目录,或者使用默认的C盘工作目录,点击 ok 按钮. 2)创建一个项目 3)输入项目名称,比如我输入Orz_Jlx,然后点击fin ...

  10. java代码----对于数据类型Integer

    总结: 主要是方法的理解 老师曾经说过final 和fianlly的区别 我自己的理解就是 如果一个类的前面定义了final,那么它就不能被继承,派生子类,对于方法,那么方法就不能改变,变量前面也是必 ...