XML卷之實戰錦囊(5)結構樹圖(轉)

XML卷之實戰錦囊(5)結構樹圖(轉)[@more@]

　　動機：

　　最初想起做二叉樹是因為需要做一個公司結構圖。 以前的做法都是直接用圖象軟體畫出來一個圖片。很好看，但每次有變動後都需要重新畫一個新的。 另一方面，網頁上對線條的顯示、佈局相當侷限。根據動態生成的資料進行排版、定位都相當困難， 而且在美觀上也差強人意。 做了各種嘗試以後，決定用XML+XSL作資料運算； 用VML來美化線條，用javascript來給物件定位。　

　　材料： 

　　XML卷之結構樹圖

　　有2個檔案：flow2.xml  和 flow2.xsl 

　　講解： 

　　二叉樹思路（1） 

　　…

　　以上這些都是VML的基本格式，我就不詳細講解了。

　　XML是樹型結構，我們讀取每個資料就需要對這個XML資料樹進行遍歷。而遞迴運算是XSL優勢之一。我也是在用其它多種方法進行遍歷運算失敗後才決定使用XSL的。

　　二叉樹--結構圖Sailflyingsailflying@163.net1第一個節點2 第二個節點… …  3 第三個節點… …  

　　邏輯上很簡單，當前節點（1）下面有兩個子節點（2，3）。

　　只需要將節點2和節點3定位在節點1的左下方和右下方就可以了。

　　這裡我將左右節點的連線線分別用了綠色和紅色，方便顯示。

　　前面我們說到了XSL的遞迴功能，為了更清楚的看到每一個詳細的

　　顯示步驟，只需要仿照下面的程式碼，加一個alert語句就可以了。

　　

　　看了上面的慢動作，是否能讓大家瞭解到我的思路。

　　二叉樹思路（2） 

　　我的思路很簡單：

　　（1）讀取當前節點的資料，用VML生成一個新的物件。

　　給物件賦初始數值（如 name,id,style樣式等）

　　（2）用指令碼控制來給當前物件定位

　　（3）當前節點和它的父親節點之間加箭頭，線條。

　　（4）繼續找當前節點的子節點，一直迴圈定位到結束。

　　也就是所有節點都遍歷完畢，已經生成好了樹。 

　　

　　整個遞迴過程就是靠上面這三個模組（template）來完成的。

　　第一個template在匹配當前節點中每一個子節點的模板的時候呼叫了後面兩個template； 而後面兩個template又在具體執行的時候呼叫了第一個template ，這就相當於一個遞迴函式。

　　語法：

　　要依次匹配當前節點中的每個子節點的模板，應使用該元素的基本形式 。否則，匹配的節點由 select 引數中 XPath 表示式的值決定，如 

　　（1）和（2）的作用都是返回由 select 引數給出的表示式的字串值。

　　他們的搜尋條件相同，所以返回的值也一樣。

　　只不過是使用的場合不同，他們的書寫形式也就不一樣。

　　（1） value-of select="./iProcess/text()" />

　　（2） {./iProcess/text()}

　　這裡定義了一些變數，節點的定位就是根據這些變數來呼叫運算公式的。

　　root_left //根的左邊距=所有葉子的分配寬度（y*10） + 所有葉子的寬度（y*50） + 左邊距基本值（10）

　　root_top //根的上邊距=上邊距基本值（10）

　　objOval //當前物件，是一個object

　　objOval_iProcess //當前物件的步驟值

　　objParentOval //當前物件的父節點，是一個object

　　objParentOval_iProcess //當前物件父節點的步驟值

　　objParent_name //當前物件父節點的名稱

　　Leaf_left //當前物件的所有子節點中的左邊葉子數 

　　Leaf_right //當前物件的所有子節點中的右邊葉子數

　　Leaf_sum //當前物件的所有子節點中葉子數 

　　葉子：是指當前節點沒有子節點

　　節點的定位公式：

　　（1） 當前節點是根節點

　　//根的位置

　　SobjOval.style.left=parseInt(root_left);

　　SobjOval.style.top=parseInt(root_top);

　　//parseInt() 函式的作用是取整數值，如果不是則為NAN

　　//isNaN()函式的作用是判斷parseInt取得的是否為整數

　　（2）當前節點是父節點的左邊子節點

　　1）判斷的條件是： 當前物件父節點的名稱='iNextYes'…

　　2）如果存在右邊子葉子，則公式為：

　　當前節點的left=父節點的left  - 當前節點的右邊子葉子的總寬度- 當前節點的寬度 

　　3）如果不存在右邊子葉子，但存在左邊子葉子，則公式為：

　　當前節點的left=父節點的left - 當前節點的左邊子葉子的總寬度

　　4）如果當前節點本身就是葉子，則公式為：

　　當前節點的left=父節點的left - 當前節點的寬度 …

　　（3）當前節點是父節點的右邊子節點

　　1）判斷的條件是： 當前物件父節點的名稱='iNextNo'…

　　2）如果存在左邊子葉子，則公式為：

　　當前節點的left=父節點的left  + 當前節點的左邊子葉子的總寬度 + 當前節點的寬度 

　　3）如果不存在左邊子葉子，但存在右邊子葉子，則公式為：

　　當前節點的left=父節點的left + 當前節點的右邊子葉子的總寬度

　　4）如果當前節點本身就是葉子，則公式為：

　　當前節點的left=父節點的left + 當前節點的寬度 

　　講解： 

　　1）flow2.xml 是資料檔案，相信大家都不會有問題。

　　2）flow2.xsl  是格式檔案，有幾個地方要注意。 

　　（1）指令碼中：

　　（1） value-of select="./iProcess/text()" /> ;

　　（2） {./iProcess/text()}

　　（1）和（2）的作用都是返回由 select 引數給出的表示式的字串值。

　　他們的搜尋條件相同，所以返回的值也一樣。

　　只不過是使用的場合不同，他們的書寫形式也就不一樣。

　　

　　比如我們想生成以下程式碼

　　

　　我們假設名稱為“name”,引數值為XML資料中當前節點下面的子節點book的值

　　第一種寫法是先加屬性名稱，再加引數值

　　第二種寫法是直接加屬性名稱和引數值

　　具體的使用你可以看我寫的程式碼中的例子。 

　　XSL在正式的 xmlns:xsl="" 的標準裡value-of select="./book/text()"/> 

　　作用是：只是把他的文字值寫出來，而 value-of select="./book"/>

　　在大多的XML教科書中所顯示的程式碼中很少會加上encoding= "gb2312" ，