vis.js网络拓扑图点击折叠节点和展开节点

首先看一下效果图：

1.数据中要添加的属性如下图所示：

2.数据中添加入上图属性后，添加点击事件即可，代码如下：

//todo 双击时折叠和展开
    network.on("doubleClick", function(params) {//双击事件
        if (params.nodes.length != 0) {//确定为节点双击事件
            var click_node_id = params.nodes[0];
            remove_all_sub_nodes(click_node_id);
        }
    });

    //todo 删除下级所有节点
    function remove_all_sub_nodes(node_id) {
        var sub_nodes = get_directly_sub_nodes(node_id);
        // console.log('sub_nodes',sub_nodes)
        if (sub_nodes.length == 0) {//当前点击的为叶子节点
            //判断是否有下级节点
            // console.log('sub',allNodes[node_id - 1]['subids']);
            if (typeof (allNodes[node_id - 1]['subids']) != 'undefined') {
                $.each(allNodes[node_id - 1]['subids'], function(index, item) {
                    // console.log('allNodes[item - 1]',allNodes[item - 1])
                    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});
            });
        }
    }

    //todo 获取某节点直属下级节点
    function get_directly_sub_nodes(node_id) {
        var return_nodes = [];
        var connectedNodes = network.getConnectedNodes(node_id);//获取所有连接节点
        $.each(connectedNodes, function(index, item) {
            // console.log('allNodes',allNodes)
            if (item != allNodes[node_id - 1]['pid']) {//当前节点的父节点 ，不操作
                return_nodes.push(item);
            }
        });
        return return_nodes;
    }

3.完整代码如下：

    
    
    
    
    
    

    
    
    





    

        
 下线
        
 通行
    



    

4.原文链接：https://www.cnblogs.com/crystaltu/p/9177759.html