visjs使用小记-3.简单网络拓扑图的折叠与展开
项目需要对节点无限层级查看，大概捣鼓了下，以下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>
