2019獨角獸企業重金招聘Python工程師標準>>>

前言

上一篇我們繪制了一個 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(), //獲取組件的底層 divstyle = 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(); //獲取對象的 iconif(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} }

選中樹上的節點，拓撲圖中的對應節點也會被選中，反過來，選中拓撲圖中的節點，樹上的節點也會被選中。

最終結果如下： 次回，我們將在場景中添加工具條！請持續跟蹤哦~

轉載于:https://my.oschina.net/xhload3d/blog/3059001

總結

以上是生活随笔為你收集整理的基于 HTML5 网络拓扑图的快速开发之入门篇（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。