项目需要对节点无限层级查看，大概捣鼓了下，以下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. BZOJ1013 JSOI2008 球形空间产生器sphere 【高斯消元】

    BZOJ1013 JSOI2008 球形空间产生器sphere Description 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点 ...

  2. 使用 Task.Wait()？立刻死锁（deadlock）

    最近读到一篇异步转同步的文章,发现其中没有考虑到异步转同步过程中发生的死锁问题,所以特地在本文说说异步转同步过程中的死锁问题. 文章作者 林德熙 已经修复了描述: - win10 uwp 异步转同步 ...

  3. 从数据库导出数据到excel之List<List<Object>>导出

    说明:有时候数据处理为List<List<Object>>更方便 姊妹篇:从数据库导出数据到excel之List<Map<>>导出 兄弟篇:从数据库导出 ...

  4. centos6 查看SELinux状态 关闭SELinux

    SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,是 Linux历史上最杰出的新安全子系统.在这种访问控制体系的限制下,进程只能访问那 ...

  5. ecmall类关系图(转)

  6. C语言 数组排序法总结

    //快速排序法 void QuickSort(int *a, int left, int right) { int i = left; int j = right; int k = a[left]; ...

  7. Java语言与C语言混合编程(1)--Java native 关键字

    一. 什么是 native Method 简单地讲,一个 native Method 就是一个java调用非java代码的接口.一个 native Method 是这样一个java的方法:该方法的实现 ...

  8. HTML第一讲

    HTML标记区分 HTML即超文本标记语言(HtyperText Markup Language),其作用就是将编辑的内容在屏幕上显示.文件的后缀为.HTML. 在HTML中成对出现的叫做双标记(譬如 ...

  9. CArray，CList，CMap如何实例化

    1.定义一个CMap,向这个CMap中增加数据项(键-值对).CMap<CString, LPCTSTR, CString, LPCTSTR>m_ItemMap;CString strKe ...

  10. [rejected] master -> master (fetch first)(non-fast forward)

    git push 时候遇到的错误: hint: Updates were rejected because the tip of your current branch is behind hint: ...