前言上一篇我们画了一个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为绝对定位。通过splitView=newht.widget.SplitView(leftView,rightView,orientation,position)初始化并构建一个拆分组件对象。leftView左组件或上组件rightView右组件或下组件orientationString类型，默认为horizo??ntal或h代表左右拆分，可设置为vertical或v代表上下拆分位置拆分位置，默认值为0.5，如果设置值为0~1除以百分比，大于1表示左边或顶部组件的绝对宽度或高度，小于1表示右边或底部组件的绝对宽度或高度。通过拆分组件，我们将树组件和拓扑组件同时添加到主体中。所需的操作只有以下几行：graphView=newht.graph.GraphView();//拓扑组件vartreeView=newht.widget.TreeView(graphView.dm());//树组件，参数是树组件绑定的数据模型，这里绑定的是graphView的数据模型，可以做数据共享varsplitView=newht.widget.SplitView(treeView,graphView,'h',0.2);//拆分组件(leftView,rightView,orientation,position)splitView.addToDOM();//给body添加splitView记住，原代码中的graphView.addToDOM语句一定要注释掉，否则后面添加到body的组件的根div会覆盖最后一个添加到body的组件的底层div，切记？addToDOM函数的定义，这里我再给大家看一下函数的定义，大家可以巩固一下：addToDOM=function(){varself=this,view=self.getView(),//获取底层的div组件样式=view.style;document.body.appendChild(视图);//将组件底层div添加到body中style.left='0';//HT的大部分组件都是绝对定位的，所以需要设置positionstyle.right='0';style.top='0';style.bottom='0';window.addEventListener('resize',function(){self.iv();},false);//添加resize事件，iv是延迟刷新}我们没有动其他部分，效果如下：貌似不清楚拓扑图哪部分是树列表的元素？别担心，让我们继续为所有节点设置“名称”。为了不迷惑观众，我把之前的代码贴出来顺便回顾一下（这里只展示其中一个节点的代码）：varserver=newht.Node();//服务器节点graphView.dm().add(server);//将服务器节点添加到拓扑图组件的数据容器中server.setName('server');//只设置名称添加了这句话server.setPosition(300,200);//设置服务器节点的位置server.setImage('images/server.png');//设置server节点的显示图片结果如下：我们会发现拓扑图中的server节点和client节点底部也多了setName设置的名称！如果不想在节点下显示文字，可以直接设置节点样式属性：server.s({//s是setStyle的缩写，设置样式'label':''//设置标签属性为空});这样是不会显示的！但是为什么可以这样设置呢？让我们看一下标签属性的定义。label属性是GraphView.getLabel函数的封装：getLabel:function(data){varlabel=data.getStyle('label');//获取样式属性label的值returnlabel===undefined?data.getName():标签；}从上面的代码可以看出样式上的label属性比name属性的优先级更高，可以重载GraphView.getLabel函数来改变文本获取逻辑。所以即使我们设置了name属性，但是设置label属性仍然可以覆盖name属性设置的值，树组件只是??获取节点的名称，所以两者并不冲突。突然觉得树上的节点显示的图标都是一样的。..换个图标！treeView树组件通过getIcon(data)返回数据对象对应的图标icon，可以重载自定义。默认情况下，返回图元的原始图标。这里我们需要自定义这个函数，为不同的节点返回不同的图标。我们之前设置的name属性就派上用场了：treeView.getIcon=function(data){varself=this,edge_icon=data.getIcon();//获取对象的图标if(data.getName()==='server'){//如果是名为server的节点return'images/server.png';}elseif(data.getName()==='client'){//如果是名为client的节点return'images/node.png';}elseif(datainstanceofht.Edge){//如果是ht.Edge类型的节点，则返回edge_icon}}选择树上的节点，拓扑图中对应的节点也会被选中，在依次选择拓扑图中的节点，树上的节点也会被选中。最终结果如下：下次，我们将工具栏添加到场景中！请继续关注~
