樹形結構JSON的實現方法

在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