vis.js网络拓扑图搜索，查询功能

笑到世界都狼狈

已于 2022-11-09 19:56:43 修改

阅读量1k

点赞数 1

分类专栏： vis.js 文章标签： vis.js vis.js查询 vis.js搜索 vis.js输入查询条件查询 vis.js筛选功能

于 2020-09-15 19:57:07 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/108607769

版权

vis.js 专栏收录该内容

8 篇文章 9 订阅

订阅专栏

拓扑图里面需要写搜索功能，但是vis.js里面找不到查询的功能，文档也不怎么看的清楚，就自己摸索着写了一个查询的功能

1.效果图：

效果图

2.html：

<div class="container-fluid">
   <input type="text" id="inputSearch" placeholder="请输入ip地址"><button id="btnSearch">搜索</button>
   <div id="mynetwork"></div>
</div>

3.js:这边的边框有参照官方demo:Vis Network | Node Styles | Images with Borders

/**
     * 搜索按钮点击事件
     * 通过遍历节点对象中的ip和文本框中的value值做对比
     * 如果包含input的value值，则给当前对象添加color和shapeProperties属性
     * else删除上述两属性
     */
    $("#btnSearch").on('click',function () {
        for (var i = 0;i<allNodes.length;i++){
            if (allNodes[i].ip.indexOf($("#inputSearch").val()) >=0  && $("#inputSearch").val() != ''){
                allNodes[i].color = {
                    border: "#406897"
                };
                allNodes[i].shapeProperties = {
                    useBorderWithImage: true
                };
            }else{
                delete allNodes[i].color;
                delete  allNodes[i].shapeProperties;
            }
        }
        new vis.Network(container, data, options);//重新初始化一下，要不然页面没效果
    });
    /**
     * 搜索回车事件
     */
    $('.container-fluid').keydown(function(event){
        if(event.keyCode==13){
            $("#btnSearch").click();
        }
    });

4.完整代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vis.js搜索、查询</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <!--<script type="text/javascript" src="js/vis-network.min.js"></script>-->
    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 600px;
            border: 1px solid lightgray;
        }
        *{padding: 0;margin: 0;}
    </style>
</head>
<body>
    <div class="container-fluid">
        <input type="text" id="inputSearch" placeholder="请输入ip地址"><button id="btnSearch">搜索</button>
        <div id="mynetwork"></div>
    </div>
<script type="text/javascript">
    // 创建节点数据数组
    var allNodes = [
        {id: 1,name: "外部网络",type: "Internet",ip:"1.1.1.1",port:"未知",pid:0,subids: [2],label:"1.1.1.1"},
        {id: 2,name: "交换机",type: "switch",ip:"192.168.30.125",mac:"48:de:3d:e2:49:a8",model:"H3C",uptime:"2020-09-03 10:50:50",port:"22",pid:1, subids: [3, 4, 5, 6],label:"192.168.30.125"},
        {id: 3,name: "交换机",type: "switch",ip:"192.168.1.8",mac:"cd:bd:3d:e2:55:55",model:"pf",uptime:"2020-09-03 10:50:50",port:"33",pid: 2,subids: [7, 8],label:"192.168.1.8"},
        {id:4,name: "计算机",type: "computer",ip:"192.168.1.8",mac:"dv:bd:fd:e2:df:fd",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"44",pid: 2,label:"192.168.1.8"},
        {id:5,name: "路由器",type: "rooter",ip:"192.168.1.8",mac:"ds:bd:3d:e2:ds:55",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"55",pid: 2,label:"192.168.1.8"},
        {id:6,name: "服务器",type: "service",ip:"192.168.1.8",mac:"vf:eq:dd:e2:55:55",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"66",pid:2,label:"192.168.1.8"},
        {id:7,name: "打印机",type: "print",ip:"192.168.1.8",mac:"ss:bd:3d:ju:55:55",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"77",pid: 3,label:"192.168.1.8"},
        {id:8,name: "手机",type: "phone",ip:"192.168.1.8",mac:"ju:ju:3d:e2:55:uy",model:"pf",uptime:"2020-09-03 10:50:50",account:"xiaox",location:"xianm",port:"88",pid:3,label:"192.168.1.8"}
    ];
    // 创建边数据数组
    var allEdges = [
        { id:"1_2",from: 1, to: 2 },
        { id:"2_3",from: 2, to: 3 },
        { id:"2_4",from: 2, to: 4 },
        { id:"2_5",from: 2, to: 5 },
        { id:"2_6",from: 2, to: 6 },
        { id:"3_7",from: 3, to: 7 },
        { id:"3_8",from: 3, to: 8 }
    ];
    /**
     * 自定义图片
     */
    for (var i = 0;i < allNodes.length;i++){
        if (allNodes[i].type == 'Internet'){
            allNodes[i].image = 'image/internet.png';
        }
        if (allNodes[i].type == 'switch'){
            allNodes[i].image = 'image/switch.png';
        }
        if (allNodes[i].type == 'hub'){
            allNodes[i].image = 'image/hub.png';
        }
        if (allNodes[i].type == 'computer'){
            allNodes[i].image = 'image/computer.png';
        }
        if (allNodes[i].type == 'rooter'){
            allNodes[i].image = 'image/rooter.png';
        }
        if (allNodes[i].type == 'service'){
            allNodes[i].image = 'image/service.png';
        }
        if (allNodes[i].type == 'print'){
            allNodes[i].image = 'image/print.png';
        }
        if (allNodes[i].type == 'phone'){
            allNodes[i].image = 'image/phone.png';
        }
    }
    // 获取容器
    var container = document.getElementById('mynetwork');
    // 创建节点对象
    var nodes = new vis.DataSet(allNodes);
    // 创建连线对象
    var edges = new vis.DataSet(allEdges);
    // 将数据赋值给vis 数据格式化器
    var data = {
        nodes: nodes,
        edges: edges
    };

    var options = {
        nodes:{
            shape: 'image'//设置图片
            // image:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599645215703&di=0cb23e74736a6a1222f35b822f5bf833&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg"
        },
    };

    // 初始化关系图
    var network = new vis.Network(container, data, options);
    /**
     * 搜索按钮点击事件
     * 通过遍历节点对象中的ip和文本框中的value值做对比
     * 如果包含input的value值，则给当前对象添加color和shapeProperties属性
     * else删除上述两属性
     */
    $("#btnSearch").on('click',function () {
        for (var i = 0;i<allNodes.length;i++){
            if (allNodes[i].ip.indexOf($("#inputSearch").val()) >=0  && $("#inputSearch").val() != ''){
                allNodes[i].color = {
                    border: "#406897"
                };
                allNodes[i].shapeProperties = {
                    useBorderWithImage: true
                };
            }else{
                delete allNodes[i].color;
                delete  allNodes[i].shapeProperties;
            }
        }
        new vis.Network(container, data, options);//重新初始化一下，要不然页面没效果
    });
    /**
     * 搜索回车事件
     */
    $('.container-fluid').keydown(function(event){
        if(event.keyCode==13){
            $("#btnSearch").click();
        }
    });
</script>
</body>

笑到世界都狼狈

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vis.js网络拓扑图搜索，查询功能

拓扑图里面需要写搜索功能，但是vis.js里面找不到查询的功能，文档也不怎么看的清楚，就自己摸索着写了一个查询的功能1.效果图：2.html：<div class="container-fluid"> <input type="text" id="inputSearch" placeholder="请输入ip地址"><button id="btnSearch">搜索</button> <div id="mynetwork".
复制链接

扫一扫