基于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