利用xslt、xml,ajax實現了一個無限級樹型導航

文章目錄

• 1、後台利用xml儲存資料
• 2、利用xslt顯示資料
• 3、利用ajax技術添加、刪除節點
• 缺點：

雖然樹型導航已經很多了，作為初學者我還是想自己弄一個，看看這個東西是怎麼實現的？順便學下js、xml、 xslt、dom等等，事情看起來似乎簡單，做起來卻花了不少功夫，有太多的地方需要完善，不過基本的功能都實現了。

介紹一下這個樹型導航，雖然微軟提供了一個Treeview，但是要是實現動態載入確不容易，因為webform這種模式使得更 新節點總是重新整理頁面，雖然有asp.net ajax,但是確實很討厭在利用asp.net webform模型時在前端產生的淩亂的代碼， 和js結合的時候又不方便，雖然有什麼指令碼管理器，誰願意把寫完的js代碼一行一行用引號引上，最後又寫到前端呢， 對webform真是又愛又恨啊，他能提高效率，但它不是什麼好東西，現在又有了asp.net mvc模型，瞭解了下，感覺還不 錯吧，不過沒用過呢，所以在這裡建議初學者別去學什麼webform了，那個東西確實沒用！微軟包了一大堆東西，要花好 多時間去學這個處理過程，頁面生存在周期之類的東西，等等等等！最後還要繞著彎去實現某些功能，汗！ 還是說下這個樹型導航吧，當然前端的js都是一句一句敲上去的，即使是ajax也沒有用jqurey實現，Lajax.js檔案裡有 ajax通訊的簡單實現，你看到檔案裡jquery，我是用jquery實現了一個彈出對話方塊，jquery的文法挺不太習慣的。

這個樹型導航主要有以下幾個特性：

1、後台利用xml儲存資料

就像Treeview一樣利用sitemap儲存網站結構，xml的形式和樹是一樣的，組織樹型資料要更形象，而且簡單。操作 xml要瞭解一些簡單的dom知識。如果瞭解xpath的話，操作xml節點就很容易了，xpath確實很好用，需要幾個小時就能上 手，帶來的便利卻是極大的。

xml資料中每個節點都帶有一個唯一的key值，這個key值便於xpath選取節點，說以key值是唯一的，如果想手工寫這 個xml文檔的話，一定要確保key值的唯一性。當然，在前幾個版本裡，我沒有用到這個key值，而是利用xpath的 position()計算的每個節點的xpath，編寫那個版本的xml不需要key值的。有興趣可以看下http://www.elooog.cn/post/29.html,後來發現利用position()計算節點的xpath在動態添加刪除節點時帶來很大的不便 ，因為添加，刪除節點時position()的計算結果就變了，不太好弄。

2、利用xslt顯示資料

xslt很強大，結合xpath，格式化xml如同寫程式一樣，方便很多，利用xpath提供的函數判斷節點數，進而覺得返回 節點的樣式，比如最後一個節點和中間的節點就不一樣，利用xslt的模板機制，加上控制流程程的語句以及xpath的內建函 數，使得把xml格式化成想要的html變得很有意思，前端是table來顯示樹型結構。

3、利用ajax技術添加、刪除節點

這個樹型導航前台節點是動態載入，避免節點過多使得載入速度變慢，前台通過ajax回調參數，擷取子節點資訊，利 用ajax使得前端不會有重新整理，在前端添加和刪除節點後台都會同步的添加和刪除。

添加節點和刪除節點都有做很多的工作，因為添加和刪除的節點可能是中間的節點，也可能是最後一個節點，為了確 保虛線顯示正確，這裡還是要做些工作的。

比如刪除節點的時候，你刪除的節點可能是父節點，也可能是子節點，你可以選擇多個節點一起刪除，但是不能一次 刪除，因為刪除節點時table內的行的索引再變，而且父節點刪除子節點也順帶的刪除了，所以解決辦法是迴圈擷取為刪 除的節點，一個迴圈刪一個節點，這樣就不會出現問題了。

缺點：

1、感覺在後台儲存xml文檔的時候有問題，因為完全的讀取和儲存，資料量大的時候可能會比較慢，待解決。

2、這個項目要是用起來的比較麻煩，最後能像一個外掛程式一樣用，比如像fckediter一樣就好了。如果做成一個 webControl就好了。

3、瀏覽器安全色性，現在在IE6下能運行正常，ff下刪除不能正常實現，還有解決下。

如果您感興趣的可以下載下來試試看哦，下載頁面地址：http://www.elooog.cn/view.asp?id=45