基于TreeGrid控件的樹結構數據呈現形式研究

張俊飛，周風華

（廣州醫科大學，廣州511436）

基于TreeGrid控件的樹結構數據呈現形式研究

張俊飛，周風華

（廣州醫科大學，廣州511436）

通過分析樹結構數據在關系數據庫中的存儲算法，采用雙親表示法實現教學評價指標樹結構數據在關系數據庫的存儲，并基于EasyUI組件中的TreeGrid控件，實現教學評價指標的樹狀展示。TreeGrid控件分級視圖顯示教學評價指標數據，具有層次分明，表意清晰的特點，為其他UI設計者提供參考。

Easy UI；TreeGrid；雙親表示法

0　引言

在計算機科學領域中，樹形數據結構（簡稱:樹結構)[1]是一種常見且非常重要的非線性結構,在實際的應用中如組織機構、人事管理等方面發揮著很好的作用。樹結構展示控件，用來顯示信息的分級視圖，具有層次分明，表意清晰的特點。很多Web插件包含樹結構控件，如Ext JS、jQuery UI和EasyUI。本研究基于本校教學評價系統項目，采用EasyUI組件中TreeGrid控件，實現教學評價指標的展示。

jQuery是當前最熱門的輕量級JavaScript開源框架，本著“write less，do more”[2]宗旨，寫更少的代碼，做更多的事，以其輕巧便捷與強大的功能受到越來越多的人追捧[3]。Easy UI是一組基于jQuery的UI插件集合，而Easy UI的目標就是幫助Web開發者更輕松地打造出功能豐富并且美觀的UI界面[4]。

關系數據庫是目前海量數據組織處理中最有效的方法,并且它提供了高效的查詢服務。但是在關系數據庫應用開發中,大部分是處理以二維表為基礎的線性結構數據[5]。非線性樹狀結構，在關系數據庫存儲，一般采用路徑表示法和雙親表示法。

1　樹結構數據在關系數據庫中存儲算法

1.1路徑表示法

路徑表示法設有一個path字段記錄了從樹的根節點到當前節點的完整路徑。以文件分配表FAT（File Allocation Table）為例，各級目錄名和文件名構成了FAT結構，如圖1。它是一個典型的樹形數據結構。路徑表示法的優點在于能夠快速查找節點，缺點在于一旦某個節點的位置發生變化時，就要維護該節點及其子節點的路徑，對于操作頻繁的樹這是非常繁瑣的[6]。

1.2雙親表示法

雙親表示法即在一組連續空間存儲樹的結點中，每個結點指示雙親結點在鏈表中的位置[7]。如表1所示。其中Data是數據域，存儲結點的數據信息。Parent是指針域，存儲該結點的雙親在數組中的下標。

表1　雙親表示法結點結構

這樣的存儲結構，根據結點Parent指針很容易找到它的雙親結點，時間復雜度為O（1）,直到parent為0或者null時，表示找到樹的結點的根。樹存儲結構缺陷是如果查找結點的孩子，則需要遍歷整個結構。但是，在本研究項目中樹結構數據主要展示教學評價指標內容，需要全部遍歷，不用考慮雙親表示法的缺陷。

2　基于TreeGrid控件展示樹狀結構數據

Web插件支持的樹結構數據，一般采用JSON的數據格式。在本校教學評價項目中，采用EasyUI組件中的TreeGrid控件實現教學評價指標的展示，也是采用JSON數據格式，在形式上保留了樹節點一對多的關系特點。TreeGrid控件支持兩種組織JSON數據方式:一種添加孩子結點到父節點中，一種采用雙親表示法指定父節點位置，如圖2、3所示。

以上兩種JSON數據組織方式，在關系數據庫中雙親表示法的JSON數據結構更容易存儲，表結構更簡單，故本研究教學評價指標數據采用雙親表示法，即添加parent指針域的結構形式存儲，如下表2所示。

在Web應用程序開發時，首先獲取到的便是從數據庫中選出的結果集，把這種線性的結果集轉化為具有層次性的JSON格式數據，本研究采用Hibernate查詢語言HQL進行數據查詢，把教學評價指標封裝成泛型集合，然后使用JSON（object data,JsonRequestBehavior behavior）方法轉化成TreeGrid控件支持的JSON格式數據。

表2　教學評價指標數據雙親表示法

//返回查詢樹結構數據結果的泛型集合

IList DXKCLBList;

DXKCLBList=session.CreateCriteria（typeof（KCPJZB））.Add

（Restrictions.Eq（"KCLBID",kclbid））.List（）;

Listkcpjzb=new List（）;

foreach（KCPJZB item in DXKCLBList）

{kcpjzb.Add（item）;}

return kcpjzb;//獲取查詢的課程評價指標數據的泛型集合

//向前臺傳遞查詢樹結構數據

Listlist=pjbfun.GetALLKCPJZB（kclbId）.ToList（）;

Hashtable ht=new Hashtable（）;

圖2　

圖3　

ht["rows"]=list;

return Json（ht,JsonRequestBehavior.AllowGet）;//采用JSON方法實現數據轉化

在Web前臺頁面中展現的效果如圖4所示。

圖4　教學評價指標數據樹狀展示效果

3　結語

本文闡述了樹結構數據在關系數據庫中的存儲算法，采用雙親表示法實現樹結構數據在關系數據庫中的存儲，并通過使用Hibernate查詢語言HQL，實現了樹結構數據從數據庫到前臺TreeGrid控件的展示。對Web UI開發者高效地使用樹結構數據提供了解決方案，具有一定的參考價值。

[1]CLIFFORD A,SHAFFER.A Practical Introduction to Data Structures and Algorithm Analysis（Second Edition）[M].Publishing House of Electronic Industry.2004:257-283.

[2]單東林.鋒利的jQuery[M].北京:人民郵電出版社，2009:10-45.

[3]李炳練.基于jQuery框架的無刷新技術設計與實現[J].電腦編程技巧與維護.2011（06）:5-19.

[4]劉宗妹,譚健欣,鄒同浩.基于數據庫的Web異步操作樹的設計與實現[J].福建電腦,2012:95,120-121.

[5]汪建,方洪鷹.樹形結構在關系數據庫中的壓縮存儲研究[J].重慶交通學院學報,2006:155-157.

[6]方耀耀.一種基于樹形結構的SQL結果集向JSON數據的轉換算法[J].電子測試,2016:51-53，61.

[7]嚴蔚敏,吳偉民.數據結構[M].北京:清華大學出版社,2002.

Research on Tree Structure Data Presentation Form Based on TreeGrid

ZHANG Jun-fei，ZHOU Feng-hua
（Guangzhou Medical University,Guangzhou 511436）

Through the analysis of the tree structured data in a relational database storage algorithm,the method of parental representation realizes the teaching evaluation index tree structure data stored in a relational database,and displays the teaching evaluation indicator using Tree-Grid control based on Easy UI components.TreeGrid control shows the teaching evaluation data by hierarchical view,with a structured, clear expression of the characteristics and provides a reference for other UI designers.

Easy UI;TreeGrid;Parental Representation

1007-1423（2016）16-0030-03DOI：10.3969/j.issn.1007-1423.2016.16.009

2016-03-31

2016-05-17

2014年廣州市高等學校第六批教育教學改革等立項項目（No.Q149149）、2015年廣州醫科大學教育科學規劃課題（No.L159208）

張俊飛，碩士，助理實驗師，研究方向為服務與計算SAAS云

周風華，碩士，講師，研究方向為微課教學設計MOOC