在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