張俊飛，周風華

（廣州醫(yī)科大學，廣州511436）

基于TreeGrid控件的樹結(jié)構(gòu)數(shù)據(jù)呈現(xiàn)形式研究

張俊飛，周風華

（廣州醫(yī)科大學，廣州511436）

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

Easy UI；TreeGrid；雙親表示法

0　引言

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

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

關(guān)系數(shù)據(jù)庫是目前海量數(shù)據(jù)組織處理中最有效的方法,并且它提供了高效的查詢服務(wù)。但是在關(guān)系數(shù)據(jù)庫應(yīng)用開發(fā)中,大部分是處理以二維表為基礎(chǔ)的線性結(jié)構(gòu)數(shù)據(jù)[5]。非線性樹狀結(jié)構(gòu)，在關(guān)系數(shù)據(jù)庫存儲，一般采用路徑表示法和雙親表示法。

1　樹結(jié)構(gòu)數(shù)據(jù)在關(guān)系數(shù)據(jù)庫中存儲算法

1.1路徑表示法

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

1.2雙親表示法

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

表1　雙親表示法結(jié)點結(jié)構(gòu)

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

2　基于TreeGrid控件展示樹狀結(jié)構(gòu)數(shù)據(jù)

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

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

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

表2　教學評價指標數(shù)據(jù)雙親表示法

//返回查詢樹結(jié)構(gòu)數(shù)據(jù)結(jié)果的泛型集合

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;//獲取查詢的課程評價指標數(shù)據(jù)的泛型集合

//向前臺傳遞查詢樹結(jié)構(gòu)數(shù)據(jù)

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

Hashtable ht=new Hashtable（）;

圖2　

圖3　

ht["rows"]=list;

return Json（ht,JsonRequestBehavior.AllowGet）;//采用JSON方法實現(xiàn)數(shù)據(jù)轉(zhuǎn)化

在Web前臺頁面中展現(xiàn)的效果如圖4所示。

圖4　教學評價指標數(shù)據(jù)樹狀展示效果

3　結(jié)語

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

[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框架的無刷新技術(shù)設(shè)計與實現(xiàn)[J].電腦編程技巧與維護.2011（06）:5-19.

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

[5]汪建,方洪鷹.樹形結(jié)構(gòu)在關(guān)系數(shù)據(jù)庫中的壓縮存儲研究[J].重慶交通學院學報,2006:155-157.

[6]方耀耀.一種基于樹形結(jié)構(gòu)的SQL結(jié)果集向JSON數(shù)據(jù)的轉(zhuǎn)換算法[J].電子測試,2016:51-53，61.

[7]嚴蔚敏,吳偉民.數(shù)據(jù)結(jié)構(gòu)[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年廣州醫(yī)科大學教育科學規(guī)劃課題（No.L159208）

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

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