项目需要对节点无限层级查看，大概捣鼓了下，以下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. ubuntu下Python的安装和使用

    版权声明 更新:2017-04-13-上午博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Python的开发环境. ...

  2. Appium+python（1）简单的介绍环境搭建

    环境搭建其实并不难,只不过安装的东西有点多,要加的环境变量有点多. 链接:https://pan.baidu.com/s/1nwLhNIT 密码:56wn 这个压缩包里要用的都有了,只需要下载,然后安 ...

  3. 《selenium2 python 自动化测试实战》（6）——打印信息和设置等待时间

    打印信息经常用的有两个: # coding: utf-8 from selenium import webdriver driver = webdriver.Firefox() driver.get( ...

  4. Cucumber 使用例子

    1. junit 配置 @RunWith(Cucumber.class) @CucumberOptions(format ={"pretty","html:target/ ...

  5. mui 拨打电话

    function callPhone() { let btnArray = ['拨打', '取消']; let Phone = "10086"; mui.confirm('是否拨打 ...

  6. 【转】redis GEO地理位置

    redis目前已经到了3.2版本,3.2版本里面新增的一个功能就是对GEO(地理位置)的支持. 地理位置大概提供了6个命令,分别为: GEOADD GEODIST GEOHASH GEOPOS GEO ...

  7. golang的最简单的文件浏览web服务器

    网上看到的,记录下,备用 package main import ( "net/http" ) func main() { http.Handle("/", h ...

  8. NOIP2013 Day1

    1.转圈游戏 https://www.luogu.org/problem/show?pid=1965 这道题失误极大,把freopen注释掉了,导致第一题暴0. 注意:在考试时一定要留下最后的时间检查 ...

  9. 了解IHttpModule接口事件执行顺便 获取Session

    本文转载自:http://www.cnblogs.com/eflylab/archive/2008/05/29/1209767.html 最近公司一个项目让人SQL注入了-为了临时先解决这个问题,使攻 ...

  10. Java 打印一个心心

    package Day8_06; public class For { public static void main(String[] args) { System.out.println(&quo ...