Dorado 5 : 2.3.3.TreeGrid(树型表格) (RF2)

简述

树型表格是一种树和可编辑表格的结合体。树型表格在制作项目进度表、甘特图方面有着非常广泛的应用。
参考范例:http://www.bstek.com/dorado5/skills/tree/treegrid.jsp
界面效果如下:

图表 24

使用

TreeGrid是DataTree(RecursiveTreeLevel类型)与DataTable的结合体,在使用TreeGrid时,首先需要你在已经掌握DataTree和DataTable两个组件对象。应此在您阅读下文时,请先储备好相关的知识。
由于综合了Tree与DataTable的功能,因此在定义和使用TreeGrid的时候,我们会涉及到属性与事件也会是同时包含Tree与DataTable中的内容。
在界面表现上TreeGrid与DataTable的最大差别在于TreeGrid中包含一个可以收缩和展开的列,例如上图中任务列。
在TreeGrid的设计中通过指定treeColumn属性指定该列,如上图的xml定义如下:

<Control
id="treegridProject"
type="TreeGrid"
recursiveKeyParameters="parent_id"
recursiveKeyFields="id"
treeColumn="task_name"
dataset="datasetProject" />

TreeGrid树数据处理原理与DataTree中的RecursiveTreeLevel是一致的应此,在TreeGrid的属性定义中提供了recursiveKeyParameters以及recursiveKeyFields属性设定,用于定义树节点的递归关系。
以下我们通过一个范例的制作来了解TreeGrid的使用:
在doradosample提供的数据库中提供了一个category的表格,我们观察其结构:

CREATE MEMORY TABLE CATEGORY(
CATEGORY_ID VARCHAR(20) NOT NULL PRIMARY KEY,
CATEGORY_NAME VARCHAR(50),
PARENT_ID VARCHAR(20)
)

该表格通过parent_id字段作外键连接。截取部分表格的数据我们再来看看:

INSERT INTO CATEGORY VALUES('1','软件需求',NULL)
INSERT INTO CATEGORY VALUES('11','性能要求','1')
INSERT INTO CATEGORY VALUES('111','数据精度','11')
INSERT INTO CATEGORY VALUES('112','时间特性','11')
INSERT INTO CATEGORY VALUES('12','数据管理要求','1')
INSERT INTO CATEGORY VALUES('121','文件记录数量','12')
INSERT INTO CATEGORY VALUES('122','表文卷的规模','12')
INSERT INTO CATEGORY VALUES('13','故障处理要求','1')
INSERT INTO CATEGORY VALUES('131','软件故障处理','1')
INSERT INTO CATEGORY VALUES('132','硬件故障处理','1')
INSERT INTO CATEGORY VALUES('2','概要设计',NULL)
INSERT INTO CATEGORY VALUES('21','总体设计','2')
INSERT INTO CATEGORY VALUES('211','外部设计','21')
INSERT INTO CATEGORY VALUES('212','结构设计','21')
INSERT INTO CATEGORY VALUES('22','接口设计','2')
INSERT INTO CATEGORY VALUES('23','运行设计','2')
INSERT INTO CATEGORY VALUES('3','数据库设计',NULL)
INSERT INTO CATEGORY VALUES('31','程序系统结构','3')
INSERT INTO CATEGORY VALUES('311','系统模块名称标识符','31')
INSERT INTO CATEGORY VALUES('312','模块层次结构关系','31')
INSERT INTO CATEGORY VALUES('32','程序设计说明','3')

定义AutoSqlDataset,绑定到category表格,并设定其MatchRule,设定查询参数parent_id:

<MatchRules>
<MatchRule level="1" dataType="string" value=":parent_id" escapeEnabled="true" table="category" originField="parent_id" operator="=" />
</MatchRules>

利用递归树的机制,动态设定dataset的parent_id参数值分批获取子节点。TreeGrid的recursiveKeyParameters以及recursiveKeyFields的属性设置如下:

<Control id="treegridProject" type="TreeGrid" recursiveKeyParameters="parent_id" recursiveKeyFields="id" treeColumn="task_name" dataset="datasetProject" fixedColumn="1" expandLevel="1" width="100%" height="100%">
<Column/>......
</Control>

通过recursiveKeyParameters以及recursiveKeyFields属性,Tree会自动地设定dataset的parent_id参数值,并动态生成子节点列表。关于这一块儿的详细描述请参考DataTree中递归树的实现。

常用技巧

treeColumn的设定

TreeGrid中treeColumn是可以任意指定的,并不会影响TreeGrid的运行机制,其父子节点的关系还是通过recursiveKeyParameters以及recursiveKeyFields属性来指定的。

关于dataset的flushData

与数据树与Dataset之间数据同步处理机制一样:数据树可以自动监听绑定的Dataset中记录的数据变化和删除等事件,但不能自动处理新增的操作(包括利用flushData()等操作从服务端新下载的记录)。因此当我们希望在数据树中能够出现与新增记录绑定的节点时必须手工进行添加。TreeGrid也具有这种特性。使用时参考DataTree的处理方式。

动态编程

这里我们来看一下如何用JAVA类来构造TreeGrid。
TreeGrid我们可以在该TreeGrid所属的ViewModel对象的实现类中处理,一般而言都是在实现类的protected void initControls() throws Exception方法中添加自定义代码申明和详细设定TreeGrid的属性,范例代码如下:

protected void initControl(Control control) throws Exception {
super.initControl(control);

if ("TestGreeGrid".equals(control.getId())){
TreeGrid tg=(TreeGrid)control;
tg.setDataset("datasetProject");//为创建的TreeGrid设置Dataset,
tg.setFixedColumn(1);
tg.setHeight("800px");

//遍历Dataset为该TreeGrid添加列
Dataset d=(Dataset)this.getDataset("datasetProject");
int fieldCount=d.getFieldCount();
for (int i = 0; i < fieldCount; i++) {
Field f=(Field)d.getField(info);
tg.addColumn(f.getName());
}
//列添加完成

tg.setTreeColumn("task_name");//将Dataset的task_name列显示为树
tg.setRecursiveKeyFields("id");
tg.setRecursiveKeyParameters("parent_id");
tg.setWidth("100%");
}
}

主要属性说明

基本属性说明参考自定义树(Tree)的属性说明数据树(DataTree)的属性说明以及数据表格(DataTable)的属性说明

treeColumn

定义了该表格中的哪一列用来显示树形结构。

主要事件说明

参考Tree与DataTable的主要事件说明。

CSS说明

TreeGrid是一个树型表格,所以它的样式采用的DataTable和Tree的样式,所以如果我们要自定义TreeGrid的样式可以通过修改DataTable和Tree来实现。具体请参考DataTable和Tree的CSS说明。