Web應用程式開發，基於Ajax技術的JavaScript樹形控制項

標籤：efi   非同步   靜態   取資料   基於   logs   屬性   架構   包含   

 

感謝http://www.cnblogs.com/dgrew/p/3181769.html#undefined

在Web應用程式開發領域，基於Ajax技術的JavaScript樹形控制項已經被廣泛使用，它用來在Html頁面上展現具有階層的資料項目。

目前市場上常見的JavaScript架構及組件庫中均包含自己的樹形控制項，例如jQuery、Dojo、YUI、Ext JS等，還有一些獨立的樹形控制項，例如dhtmlxTree等，這些樹形控制項完美的解決了層次資料的展示問題。

展示離不開資料，樹形控制項主要利用Ajax技術從伺服器端擷取資料來源，資料來源的格式主要包括JSON、XML等，而這些層次資料一般都儲存在資料庫中。“無限級樹形結構”，顧名思義，沒有層級的限制，它的資料通常來自資料庫中的無限級層次資料，這種資料的儲存表通常包括id和parentId這兩個欄位，以此來表示資料之間的層次關係。現在問題來了，既然樹形控制項的資料來源採用JSON或XML等格式的字串來組織層次資料，而層次資料又儲存在資料庫的表中，那麼如何建立起樹形控制項與層次資料之間的關係，換句話說，如何將資料庫中的層次資料轉換成對應的階層的JSON或XML格式的字串，返回給用戶端的JavaScript樹形控制項？這就是我們要解決的關鍵技術問題。

本文將以目前市場上比較知名的Ext JS架構為例，講述實現無限級樹形結構的方法，該方法同樣適用於其它類似的JavaScript樹形控制項。   Ext JS架構是富用戶端開發中出類拔萃的架構之一。在Ext的UI控制項中，樹形控制項無疑是最為常用的控制項之一，它用來實現樹形結構的視圖。TreeNode用來實現靜態樹形結構，AsyncTreeNode用來實現動態非同步載入樹形結構，後者最為常用，它通過接收伺服器端返回來的JSON格式的資料，動態產生樹形結構節點。

動態產生樹有兩種思路：一種是一次性產生全部樹節點，另一種是逐級載入樹節點（利用Ajax，每次點擊節點時查詢下一級節點）。對於大資料量的樹節點來說，逐級載入是比較合適的選擇，但是對於小資料量的樹節點來說，一次性產生全部節點應該是最為合理的方案。

在實際應用開發中，一般不會遇到特別大資料量的情境，所以一次性產生全部樹節點是我們重點研究的技術點，也就是本文要解決的關鍵技術問題。本文以基於Ext JS的應用系統為例，講述如何將資料庫中的無限級層次資料一次性在介面中產生全部樹節點（例如在介面中以樹形方式一次性展示出銀行所有分公司的資訊），同時對每一個層次的節點按照某一屬性和規則排序，展示出有序的樹形結構。轉載請註明論文發表代理http://www.400qikan.com

 

     利用多叉樹實現Ext JS中的無限級樹形菜單（一種構建多級有序樹形結構JSON的方法）                                                 

 

Web應用程式開發，基於Ajax技術的JavaScript樹形控制項