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

張俊飛，周風(fēng)華

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

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

張俊飛，周風(fēng)華

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

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

Easy UI；TreeGrid；雙親表示法

0　引言

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

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

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

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

1.1路徑表示法

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

1.2雙親表示法

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

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

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

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

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

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

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

表2　教學(xué)評(píng)價(jià)指標(biāo)數(shù)據(jù)雙親表示法

//返回查詢樹(shù)結(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;//獲取查詢的課程評(píng)價(jià)指標(biāo)數(shù)據(jù)的泛型集合

//向前臺(tái)傳遞查詢樹(shù)結(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方法實(shí)現(xiàn)數(shù)據(jù)轉(zhuǎn)化

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

圖4　教學(xué)評(píng)價(jià)指標(biāo)數(shù)據(jù)樹(shù)狀展示效果

3　結(jié)語(yǔ)

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

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

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

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

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

[7]嚴(yán)蔚敏,吳偉民.數(shù)據(jù)結(jié)構(gòu)[M].北京:清華大學(xué)出版社,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年廣州市高等學(xué)校第六批教育教學(xué)改革等立項(xiàng)項(xiàng)目（No.Q149149）、2015年廣州醫(yī)科大學(xué)教育科學(xué)規(guī)劃課題（No.L159208）

張俊飛，碩士，助理實(shí)驗(yàn)師，研究方向?yàn)榉?wù)與計(jì)算SAAS云

周風(fēng)華，碩士，講師，研究方向?yàn)槲⒄n教學(xué)設(shè)計(jì)MOOC