项目需要对节点无限层级查看，大概捣鼓了下，以下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. 在后台new出页面（组件）

    Page p = new Page();            Control u = p.LoadControl("~/folderName/controlName.ascx") ...

  2. 实例-QPSK的fpga实现

  3. rollupjs 基本试用

    备注:    前端构建工具   1. 安装 yarn global add rollup yarn global add rollup 2. 基本使用 touch index.js index.js ...

  4. saas 系统租户自助网站

    1. 原理       类似github 的自定义页面,使用jekyll 进行租户自助网站的生成,系统使用jenkins 进行租户的网站构建    同时结合租户的个性化域名系统,进行租户页面的发布管理 ...

  5. 一些IPC常用头文件

    //my_err.h#include <errno.h> /* for definition of errno */ #include <stdarg.h> /* ISO C ...

  6. 如何将angular-ui-bootstrap的分页组件封装成一个指令

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...

  7. logcat调试系统

    日志存放位置:/dev/log shell@xxx:/ $ ls /dev/log -l crw-rw-rw- root log , -- : events crw-rw-rw- root log , ...

  8. openresty+lua做接口调用权限限制

    说明:openresty可以理解为一个服务器它将nginx的核心包含了过来,并结合lua脚本语言实现一些对性能要求高的功能,该篇文章介绍了使用openresty 1.purview.lua --调用j ...

  9. Unit03： Spring Web MVC简介 、 基于XML配置的MVC应用 、 基于注解配置的MVC应用

    Unit03: Spring Web MVC简介 . 基于XML配置的MVC应用 . 基于注解配置的MVC应用 springmvc (1)springmvc是什么? 是一个mvc框架,用来简化基于mv ...

  10. JAVA-Unit05： 视图、序列、索引 、 约束

    Unit05: 视图.序列.索引 . 约束 视图 数据库对象之一 视图在SQL语句中体现的角色与表相同, 但它并非一张真实存在的表,它对应的 是一个查询语句的结果集. 创建一个查看10号部门员工信息的 ...