上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 graphView.dm().add() 函数添加了两个 Node 节点,并通过 setPosition 设置节点位置以及 setImage 给节点添加图片;接着在两个节点之间通过 ht.Edge(sourceNode, targetNode) 添加了两条连线(实际上还可以更多),并给连线添加了 label 标签显示文字,同时也通过 label.position 设置了文字在连线上的位置。
这一篇我的想法是在左侧添加一个显示所有节点的“树”节点列表,就是将场景中所有的节点都添加到这个“树”列表中。这个部分在我看来简直是简单到极点啊,当然,HT 很多组件都跟这个类似,非常方便。
首先我们得创建这个“树”,HT 中的 ht.widget.treeView 组件就是用来创建“树列表”的。我们在上一篇中有介绍过 addToDOM 函数,用来将组件添加进 body 体中,我们要实现左边是“数列表”右边是拓扑场景,该如何做呢?这里再引入一个组件 ht.widget.SplitView,顾名思义“分割”组件。分割组件用于左右或上下分割两个子组件, 子组件可为HT
框架提供的组件,也可为 HTML 的原生组件,子组件以 position 为 absolute 方式进行绝对定位。
通过 splitView = new ht.widget.SplitView( leftView, rightView, orientation, position )初始化构建一个分割组件对象。leftView 左组件或上组件 rightView 右组件或下组件 orientation 字符串类型,默认为 horizontal 或 h 代表左右分割,可设为 vertical 或 v 代表上下分割 position 分割位置,默认值为 0.5,如果设置值为 0~1 则按百分比分割,大于 1 代表左组件或上组件的绝对宽或高,小于 1 代表右组件或下组件的绝对宽或高。
通过分割组件我们树组件和拓扑组件同时添加进 body 体中,需要的操作只有如下几行:
graphView = new ht.graph.GraphView();//拓扑组件 var treeView = new ht.widget.TreeView(graphView.dm());//树组件,参数为树组件绑定的数据模型,这里绑定的是 graphView 的数据模型,就可以进行数据共享 var splitView = new ht.widget.SplitView(treeView, graphView, 'h', 0.2);//分割组件 (leftView, rightView, orientation, position) splitView.addToDOM();//将 splitView 添加进 body 中
记住,原代码中的 graphView.addToDOM 语句得注释掉,否则后面添加到 body 体中的组件的根层 div 会覆盖住上一个添加进 body 体中的组件的底层 div,大家还记得吧? addToDOM 函数的定义,这里我再次将函数的定义给大家展示一下,大家可以巩固一下:
addToDOM = function(){ var self = this, view = self.getView(), //获取组件的底层 div style = view.style; document.body.appendChild(view); //将组件的底层 div 添加进 body 中 style.left = '0';// HT 的绝大部分组件都是绝对定位,所以需要设置位置 style.right = '0'; style.top = '0'; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //添加 resize 事件,iv 为延时刷新 }
其他部分我们都没有动,大家可以看看效果:
这样看着好像不太明确到底拓扑图上的哪部分是树列表上的元素?不急,我们继续,给我们的所有节点都设置上“名称”,为了不混淆视听,我将之前的代码也粘出来,也顺便复习一下(这里只显示其中一个节点的代码):
var server = new ht.Node();//服务器节点 graphView.dm().add(server);// 将服务器节点添加进拓扑图组件的数据容器中 server.setName('server');//设置名称 只添加了这一句 server.setPosition(300, 200);//设置服务器节点的位置 server.setImage('images/server.png');//设置服务器节点的显示图片
结果如下:
我们会发现,拓扑图中的服务器节点以及客户端节点底部也多了 setName 设置的名称!如果不想要在节点下面显示字的话,可以直接设置节点 style 属性:
server.s({//s 为 setStyle 的缩写,设置样式 'label': ''// 将 label 属性设置为空 });
这样就不显示啦!但是为什么这样设置可以呢?我们来看看 label 属性的定义,label 属性即为 GraphView.getLabel 函数的封装:
getLabel: function (data) { var label = data.getStyle('label');//获取样式属性 label 的值 return label === undefined ? data.getName() : label; }
通过以上代码可知,style 上的 label 属性优先级高于 name 属性,可重载 GraphView.getLabel 函数改变文字获取逻辑。所以就算我们设置了 name 属性,但是再设置 label 属性还是能将 name 属性设置的值给覆盖掉的,而树组件上获取的只是节点的 name,所以两者并不冲突。
突然感觉树上的节点显示图标为什么都一样。。。改图标!
treeView 树组件通过 getIcon(data) 返回 data 对象对应的 icon 图标,可重载自定义,默认返回的都是图元原始的图标,这里我们要自定义这个函数,针对不同的节点返回不同的 icon,前面我们设置的 name 属性派上用场了:
treeView.getIcon = function(data){ var self = this, edge_icon = data.getIcon();//获取对象的 icon if(data.getName() === 'server'){//如果是 name 为 server 的节点时 return 'images/server.png'; }else if(data.getName() === 'client'){//如果是 name 为 client 的节点时 return 'images/node.png'; }else if(data instanceof ht.Edge){//如果是 ht.Edge 类型的节点时 return edge_icon } }
选中树上的节点,拓扑图中的对应节点也会被选中,反过来,选中拓扑图中的节点,树上的节点也会被选中。
最终结果如下:
次回,我们将在场景中添加工具条!请持续跟踪哦~
相关推荐
上回添加的是树组件,这回我们来添加看看属性组件,非常简单~
上回我们用 ht.widget....HT for Web 提供了工具条组件类 ht.widget.Toolbar,工具条上的元素可为原生的 html 元素, 也支持 ht 提供的如 ht-form.js 的表单插件中的组件,并内置提供了按钮、单选按钮、复选框等组件。
基于SNMP的网络拓扑发现 - 我的未来不是梦! - JavaEye技术网站.files基于SNMP的网络拓扑发现 - 我的未来不是梦! - JavaEye技术网站.files
数据绑定有时候真的很让人头疼,我想要的只是能快速开发,快速绑定!最好能随时随地动态变化数据,并且能够通过 json 来操作,那就更好了
主要介绍了详解快速开发基于 HTML5 网络拓扑图应用的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
ppt超赞网络拓扑图素材 - blotemj
网络拓扑图动态线条实现
网络拓扑图示例-阿里云专有云架构 -.vsdx
拓扑排序------打印输出计算机本科专业4年每学期的课表 拓扑排序------打印输出计算机本科专业4年每学期的课表 拓扑排序------打印输出计算机本科专业4年每学期的课表
电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等都可以用 HTML5 的图形化界面来完成,所有这些简称为拓扑图。使用 HT 会让你的开发变得更加快速,快来玩玩吧!
阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云...
智和信通推出的一款基于Java技术开发的免费网络拓扑软件- SugarNMSTool,能够实现网络设备搜索发现、设备拓扑生成以及设备内部资源发现等功能。
在基于Visio的网络拓扑图中动态显示关键性能指标的实现方法,李显争,,网络拓扑图是网络管理系统界面的重要组成部分,基于Visio的网络拓扑图可以让用户根据需要自己绘制网络拓扑图,并将其在网管系统中�
SJW拓扑图---1021.vsdx
使用Qt实现网络拓扑图的层级结构,可以对网络节点进行拖动,周边的线条也会随之拖动。
利用QGraphicsView、QGraphicsPixmapItem、QGraphicsLineItem实现多层子网网络拓扑图
网络拓扑图
利用qunee实现js和html5完成网络拓扑图的自动排列展示