简述
树型表格是一种树和可编辑表格的结合体。树型表格在制作项目进度表、甘特图方面有着非常广泛的应用。
参考范例: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 |
TreeGrid树数据处理原理与DataTree中的RecursiveTreeLevel是一致的应此,在TreeGrid的属性定义中提供了recursiveKeyParameters以及recursiveKeyFields属性设定,用于定义树节点的递归关系。
以下我们通过一个范例的制作来了解TreeGrid的使用:
在doradosample提供的数据库中提供了一个category的表格,我们观察其结构:
CREATE MEMORY TABLE CATEGORY( |
该表格通过parent_id字段作外键连接。截取部分表格的数据我们再来看看:
INSERT INTO CATEGORY VALUES('1','软件需求',NULL) |
定义AutoSqlDataset,绑定到category表格,并设定其MatchRule,设定查询参数parent_id:
<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%"> |
通过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 { |
主要属性说明
基本属性说明参考自定义树(Tree)的属性说明和数据树(DataTree)的属性说明以及数据表格(DataTable)的属性说明。
treeColumn
定义了该表格中的哪一列用来显示树形结构。
主要事件说明
参考Tree与DataTable的主要事件说明。
CSS说明
TreeGrid是一个树型表格,所以它的样式采用的DataTable和Tree的样式,所以如果我们要自定义TreeGrid的样式可以通过修改DataTable和Tree来实现。具体请参考DataTable和Tree的CSS说明。