Jtopo入门篇_技术与业务的结合

         上个星期接了一个任务，使用jtopo画图。接到任务之后去看下了jtopo，自己动手实操一番，感觉不是很难。但是真正开始做页面的时候懵逼了。因为看看API，使用几个静态数据去做做demo是非常简单的事情。然而真正要和业务结合在一起，使用技术满足业务逻辑，就不是那么一回事了，现在总结一下画jtopo在面对业务场景中需要注意的一些东西。

首先看看已经画好的界面，如下图

       

    中间那一小块就是Jtopo，现在是全部展开状态。这个页面的主要功能是展现电路的一些基本信息，点击最上层IP电路的加号，会加载下一层传输电路，点击传输电路加号加载下一级光缆段。点击传输电路的连接线，下一个列表也要展示信息。同时，加减号按钮不是一成不变。初始化的时候是一个 +，点击一下之后变成 -，并对应事件，有点类似于Ztree的加减号。并且线的事件也不是所有的都有，只有中间一级的传输电路才要，并且点击不同的线，列表也要加载对应的光缆段。

从上面的描述来看，第一个遇到的问题就是怎么确定点的位置。这个点是动态加载的，第一个层级的电路和站点容易画，但是第二个层级和第三个层级站点数量都不是固定的，有可能是三个，有可能是四个，也有可能没有。

第二个问题就是数据的顺序。从数据库中找出的数据没有编号，顺序也是随机的，并且站点信息是包含在光缆信息中，并不知道站点之间的顺序，光缆之间的顺序，数据构造可见下图

第三个问题是加号事件，因为点击一下，加载下一级光缆，站点，再点击，下一级节点就消失。然后下一级也有加号，点击一下，再加载下一级。难的并不是怎么去加载，而是这个加号事件怎么去操作。现在有三个层级，还能写三个加号事件，万一以后有十几个层级，我想就不能这样写了。

可以说这三个问题是写这个界面遇到的最大的问题，并且第二个问题还不属于Jtopo技术范围内的，但是事实情况就是  第二个问题恰恰是最关键，最让人头痛的。当然这个算法是在java代码中进行的过滤，所以并不是今天讨论的重点。

现在谈谈是怎么解决这些问题的，希望解决这个问题的思路能给遇到类似情况朋友一些参考

1.对于多个层级节点的加载，咋一看让人感觉很难下手。编程的本质就是解决问题，解决问题的时候要抓住问题的

本质。同样，画topo图也要抓住这个图的 "根" =。=

不要想歪，这个根，指的就是根节点。只要确定第一个层级的起始站点的位置，后面的终端站点和中间的

加号，包括下一个层级的其实站点都是可以算出来的，具体算法就不叙述了，因为每个业务的情况都不一样。

2.对于加号点击事件，主要是两个层级，每一个层级都是对下一级进行操作的。既然是事件，那就要搞清楚这个

事件主要是做什么，在这个业务场景中，只有两件事，加载下一级或者是隐藏下一级。并且所有的加号都做这样的事情。

因为，既然都做同样的事情，那么首先想到的就是封装这个事件（貌似用递归也可以）。只是在事件中，加载的下

一级的数据和位置不一样。本质操作还是一样，只是数据不同。

以上，就是对这几个问题的解决思路，在实际操作中我也基本是遵循着这个思想在编码。当然解决问题有很多

办法，欢迎留言或者邮件讨论。

QQMAIL：315843040@qq.com