jtopo用法总结，点击展开子节点、导出png图片、实现查询功能、拖拽和点击事件区分、点击添加连线后在添加连线、改变文本位置、添加自定义属性

笑到世界都狼狈

已于 2022-11-11 09:30:31 修改

阅读量2.6k

点赞数 1

分类专栏： jtopo 文章标签：点击展开子节点(和鼠标拖拽事件区分) 导出png图片实现查询功能点击添加连线后才能添加连线改变文本位置添加自定义属性

于 2020-01-11 16:35:17 首次发布

jtopo 专栏收录该内容

10 篇文章 4 订阅

订阅专栏

最近在写拓扑图，有百度到一位大佬的CSDN上有好多关于jtopo的东西，虽然已经默默关注了，但还是记一下笔记。

1.拓扑图点击展开子节点，具体参照：https://blog.csdn.net/qq_39759115/article/details/89156175（这个我在下面第四条，鼠标拖拽的时候做了一些优化）

2.原demo导出PNG图片是点击之后跳转新页面，右键才能保存，修改成点击按钮直接弹出下载图片框，下载图片，具体参照：https://blog.csdn.net/qq_39759115/article/details/78793741

3.原demo中的查询功能不能实现，具体参照：https://blog.csdn.net/zw421152835/article/details/51280436?locationNum=1

在这个查询功能上我自己有做一点优化：

//原demo的οnkeydοwn="findButton.click()"放在findText的input中，键盘输入的时候拓扑就在变，不好看，将其删掉，在加了一个回车事件，点击回车也可以实现查询功能
$("#findText").on("keydown", function (event) {
   if (event.keyCode == 13){
       $('#findButton').click();
   }
});

4.拖拽节点的时候也会触发点击事件(展开或收起子节点)，对点击和拖拽做了区分mousedrag

var drop = false;//拖拽
var timer;//拖拽定时器
//鼠标拖拽
node.addEventListener("mousedrag", function(event){
    drop = true;
    clearTimeout(timer);
    timer = setTimeout(function () {
        drop = false;
    }, 300);
});

/**
 *点击子节点折叠展开（如果没有拖拽，才执行节点展开操作）
 * */
function showChildNode(event) {
    thisX = event.offsetX;
    thisY = event.offsetY;
    var distanceX = Math.abs(thisX - thatX);
    var distanceY = Math.abs(thisY - thatY);
    if(distanceX > 20 || distanceY > 20){
        // 区分拖拽和单击事件
    }else if(event.target && event.target.elementType == "node"){
        //如果没有拖拽，才执行节点展开操作(这边是对第一点展开子节点的一点优化)
        if (!drop){
            foldOpen(event); // 折叠与展开子节点功能
        }
    }
}

5.原demo添加连线只要鼠标在两个节点上点击不用选菜单上的添加连线就可以连接修改成必须点击添加连线操作才能连线(validation)

var validation = null;
// 鼠标单击
node.addEventListener('click', function(event){
    endTopoDevice = node;
    if(null != currentNode && currentNode != endTopoDevice && validation === true){
        endNode = node;
                    if (null != currentNode && currentNode != endNode) {
                        Addlink(currentNode, endNode,'');
                        currentNode = null;
                    }
    }
});
if(text == '添加连线'){
    validation = true;//验证是否在当前节点上右键点击了添加节点
}

在上面几个地方添加上validation信息就可以了！！！

6.jtopo改变文本的位置

这是官网的信息，但是官网写的真的是太过简单潦草，以至于我把代码复制粘贴出来试了半天才知道哪个是改变文本位置的关键

http://www.jtopo.com/demo/node-label-position.html

代码中有个circleNode.textPosition= 'Middle_Center';，将等号后面' '引号中的值改成自己想要的位置就可以了，jtopo中提供的可供选择的几个位置有：

'Top_Left', 'Top_Center', 'Top_Right', 'Middle_Left', 'Middle_Center', 'Middle_Right', 'Bottom_Left', 'Bottom_Center', 'Bottom_Right'

7.jtopo添加自定义属性

jtopo自己封装的数据里面可能没有我们从后台拿到的数据，此时我们就要将数据自定义添加到数据中，我项目中有在function AddNode(){}和function AddLink(){}都添加，这个具体看本人需要什么数据，在添加，添加的方法是：

node.ip = topoDev.ip;//node.ip中的ip是我要往数据里添加一个ip，后面topoDev.ip是我通过ajax获取的后台值
node.status = topoDev.status;//状态
node.serializedProperties.push('ip');//指的是node.ip的ip
node.serializedProperties.push('status');