7.树
7.1 多列多层树
默认情况下(即 treeformat="normal" )Treelist可以以列表、或多列多层树展现,通过鼠标右键可以在二者之间任意切换,换句话说,列表和多列多层树是互通的.7.2 单列多层树
顾名思义,只有一列数据就能按多层展开的树就是单列多层树,例如我们熟知的windows的资源管理器,左侧的目录树就是单列多层树.7.2.1 单列多层树的treeformat语法
单列多层树的格式声明稍复杂,如下是全部可用的选项子句:7.2.2 格式一:treeformat="byId"
此类单列多层树有一个明显的特征,就是某列的数据本身就蕴含了分层的特性,我们称之为“代码列”,例如会计科目代码。![]() | ![]() |
注1:此类单列多层树,在其 XML 描述文件中,代码列必须是第一列.
注2:<Properties> 的 Key 自动默认为第一列;
注3:代码列的各行内容不得重复,否则会导致树的分级紊乱.
7.2.3 格式二:treeformat="byData"
Treelist还支持比较特殊的数据格式:数据本身就是XML树!<?xml version="1.0" encoding="utf-8"?> <Data> <row ID="20" ks="硕正套件" ddm="ac"> <row ID="51" ks="语法" ddm="ac" LazyLoad="tree.aspx?id=51"/> <row ID="63302" ks="函数" ddm="at"/> <row ID="DDM" ks="事件" ddm="ac"> <row ID="20KK3" ks="OnReady" ddm="a"/> <row ID="40KK4" ks="OnEvent" ddm="th"/> </row> </row> <row ID="120" ks="安装" ddm="ac" LazyLoad="tree.aspx?id=120"/> </Data>
7.2.4 格式三:treeformat="byPid"
为了方便程序员后端开发,硕正单列多层数还支持通过显式的 PID (即ParentId)指定父节点的树数据格式, 例如:<?xml version="1.0" encoding="utf-8"?> <Data> <row ID="20" ks="硕正套件" ddm="ac"/> <row ID="51" PID="20" ks="语法" ddm="ac" LazyLoad="tree.aspx?id=51"/> <row ID="63302" PID="20" ks="函数" ddm="at"/> <row ID="DDM" PID="20" ks="事件" ddm="ac"/> <row ID="20KK3" PID="DDM" ks="OnReady" ddm="a"/> <row ID="40KK4" PID="DDM" ks="OnEvent" ddm="th"/> <row ID="120" ks="安装" ddm="ac" LazyLoad="tree.aspx?id=120"/> </Data>也支持这样的普通XML格式:
<?xml version="1.0" encoding="utf-8"?> <Data> <row> <ID>20</ID> <PID></PID> <ks>硕正套件</ks> <ddm>ac</ddm> </row> <row> <ID>51</ID> <PID>20</PID> <ks>语法</ks> <ddm>ac</ddm> <LazyLoad>tree.aspx?id=51</LazyLoad> </row> ... </Data>
注1:Treelist 的 XML 描述文件中必须要有名为 "ID" 和 "PID" 的列,否则会抛出错误;
注2:<Properties> 的 Key 自动默认为 "ID";
注3:如果数据行没有 PID、或 PID 指向的行不存在,则自动作为根节点.
7.2.5 autoid子句
treeFormat语法中还有一个可用子句: autoid=[true/false]; autoIdLen=[?] 例如:![]() | ![]() | |
图1:拖为平辈 | 图2:拖为子孙 |
注:byPid、byData 的单列多层树,本身就支持上述自由拖拽的功能的.
7.2.6 SeparateChar子句
SeparateChar 仅用于 byId 的单列多层树,它用来指明id数据中的级次分隔符,下面二张图,加载的数据都一样,但是使用或不使用 SeparateChar,构成的树是截然不同的:![]() | ![]() |
7.2.7 subtotalNodeEditAble子句
treeFormat语法中还有一个不太常用的子句: subtotalNodeEditAble=[true/false]7.2.8 单列多层树的懒加载(LazyLoad)
单列多层树的树杈有延后加载的功能:树杈在首次展开时,能即时从服务器加载数据。LazyLoad有几种不同的实现方法, 下面逐个介绍:
方法1:
定义一个名为“LazyLoad”的列(<col name="lazyload" isHide="absHide"/>),这个lazyload列的数据是取子孙行的URL,如果该列内容为空,就表示是树叶。
方法2:
让<Properties>的"LazyLoad"属性指向一个能算出URL的表达式,比如 lazyLoad="='../getcd.aspx?id=' + id".
方法3:
让<Properties>的 LazyLoad="true",表示树杈首次展开时将触发"LazyLoad"事件,由您自己从后端加载数据,然后通过Load( )函数插入数据.
方法2和方法3都是默认让所有行都成为树杈,在加载不到数据时才变成树叶。如果您觉得这样不妥,可以增加一个名为"isLeaf"的列,比如:
<col name="isLeaf" isHide="absHide"/>
如果加载的数据中 isLeaf 为 1 或 true, 则该行就肯定是树叶了。
7.2.9 单列多层树的图标
树通常需要一个小图标,有如下几种树的图标方案: