tree.htm
12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="../temp1.css" type="text/css">
<script type="text/javascript" src="functable.js"></script>
<script>
function gentable()
{
var xmlDoc = getXMLDoc("events.xml?81");
geneventtable('TagEvent', xmlDoc, 'Tree');
}
</script>
</head>
<body onLoad="gentable()" bgcolor=#ffffff vlink=#0000ff>
<div id="Tag40"/>
<Table cols=2 border=0 width=100%>
<col width=60%>
<col width=40%>
<tr height=91><td/><td><img src='../../res/tradechart.jpg'></td></tr>
</table>
<br>
<h3> <font color=#3366ff>Supcan Tree组件</font></h3><hr color=#2266ee size=1>
Supcan Tree组件是一个简单的树控件组件，从MFC的CTreeCtrl类继承，插件/加载项能将其展示到页面。<br>
树是根据一个XML(或JSON)创建的，该XML可以是一个URL，也可以是一个XML串。<br>
<div id="Tag401"/><br><br><br>
<font style='font-size:15pt'>1.创建实例</font><hr color=#2266ee size=1>
Supcan Tree组件是通过插件/加载项创建的，所以应该用<a href="act.htm?81#Tag205" target=_blank>使用指南 \ 页面语法</a>中叙述的插件/加载项的页面创建语法创建，
<Object>中的某几个Param参数规则如下:<br>
<pre class='xml'>
<Object ...(略)>
<Param name="CtlName" value="<Font color=red>BCV1.Tree</Font>"> //固定
<Param name="ZipUrl" value="<Font color=red>BCV1.bin</Font>"> //也可以是绝对URL
<Param name="CtlPara" value="Border=single,3D; NodeImage=2; BackPicture=../res/trade.gif"> //例子
...</pre>
如果页面是直接调用dynaload.js，那么可能就是这样:<br>
<pre class='cpp'>insertTree('AF', 'Border=single,3D; NodeImage=2; BackPicture=../res/trade.gif')</pre>
<table cols=2 border=0 width=98%>
<tr><td> CtlPara参数决定了如何在页面上展现Supcan Tree实例，在上面的例子中，参数串中可包含多个子串，子串间以 "；" 分隔。子串的名值对的规范如下：</td>
<td align=right> <img src='document.bmp' title='请参见演示页: 3.树控件'></td>
</tr></table>
<table width=98% cellpadding=4 cellspacing=0 border=1 borderColorLight=#999999 borderColorDark=#999999 align="center">
<tr bgcolor=#eaeaea><td>子串名</td><td>含义</td><td>可用值</td><td>默认值</td></tr>
<tr><td>Border</td><td>边界</td><td>
1.none - 无边界<br>
2.single - 单线条边界<br>
3.3dLower(或3d) - 3D凹进边界<br>
4.3dRaise - 3D凸起边界
</td><td>single</td></tr>
<tr><td>BorderColor</td><td>边界色</td><td>颜色，仅用于Border=single</td><td>#7f9db9</td></tr>
<tr><td>Style</td><td>显示风格</td><td>
可以包含如下串，同时选用则以逗号分隔:<br>
1.hasButton - 含有展开/收拢的+/-小按钮<br>
2.hasLine - 含有树的连接线<br>
3.hasCheckBox - 左侧含有CheckBox<br>
4.singleExpand - 不能同时展开多个节点<br>
5.showSelAlways - 始终显示当前选择项焦点<br>
6.editLabel - 允许编辑文字<br>
</td><td>(无)</td></tr>
<tr><td>lineHeight</td><td>行高</td><td>像素数</td><td>19</td></tr>
<tr><td>NodeImage</td><td>树杈的默认图标</td><td>-1表示不显示图标，0至3表示采用如下图标中的一个：<br><img src="treenode.png"><br>也可以是外部自定义的图片文件的URL(支持<a href="pub.htm?81#Tag605" target=_blank>图片扩展URL</a>)</td><td>0</td></tr>
<tr><td>LeafImage</td><td>树叶的默认图标</td><td>-1表示不显示图标，0至12表示采用如下图标中的一个：<br><img src="treeleaf.png"><br>也可以是外部自定义的图片文件的URL(支持<a href="pub.htm?81#Tag605" target=_blank>图片扩展URL</a>)</td><td>0</td></tr>
<tr><td>bgColor<br>或BackColor</td><td>背景色</td><td>颜色，如果是以逗号分隔的2个颜色值，则表示在垂直方向的渐变</td><td>(无)</td></tr>
<tr><td>Picture 或<br>BackPicture</td><td>背景图</td><td>图片的URL，支持<a href="pub.htm?81#Tag605" target=_blank>图片扩展URL</a></td><td>(无)</td></tr>
<tr><td>arrange</td><td>背景图片显示方式</td><td>1.tile - 平铺<br>2.stretch - 伸展<br>3.单幅原样显示，须是水平、垂直的对齐组合，水平:left / center / right,垂直:top / middle / bottom，例如"bottom,right"</td><td>tile</td></tr>
<tr><td>EventLog</td><td>事件日志</td><td>文件名，建议后缀是txt, 不必带路径，系统将自动在 BC 目录下创建. 该文件能自动记录本组件实例的所有事件, 用于程序调试.<br>注：正式运行时请不要使用，因为频繁读写磁盘会导致性能下降.</td><td>无</td></tr>
<tr><td>FuncLog</td><td>函数调用日志</td><td>文件名，建议后缀是txt, 不必带路径，系统将自动在 BC 目录下创建. 该文件能自动记录本组件实例被调用的所有函数, 用于程序调试.<br>注：正式运行时请不要使用，因为频繁读写磁盘会导致性能下降.</td><td>无</td></tr>
<tr><td>FuncParaChars</td><td>函数日志中参数最大字数</td><td>数字，当启用函数日志时，函数的参数最多保留字数.</td><td>128</td></tr>
<tr><td>FuncReturnChars</td><td>函数日志中返回值最大字数</td><td>数字，当启用函数日志时，函数的返回值最多保留字数.</td><td>0</td></tr>
</table>
备注1: 所谓“默认值”就是在没有设定值的情况下，Tree自动采用的值.<br>
备注2: 所谓“zip包中的BMP的URL”，写法例如: “http://..../abc.zip#pic1.bmp”<br>
备注3: 上述URL为绝对URL或相对URL<br>
<div id="Tag405"/><br><br><br>
<font style='font-size:15pt'>2.关于图标</font> <img src='document.bmp' title='请参见演示页: 3.树控件'><hr color=#2266ee size=1>
树控件的图标有多种方案。<br>
<b>方案一：默认图标方案</b><br>
默认图标是根据上述创建参数中的NodeImage、LeafImage来定义的，树杈和树叶统一显示成2种图标。硕正套件已经内置了若干个图标，你可以从中选择。如果你想采用你自己定义的图标，须注意：<br>
1.图片文件支持bmp、png、jpg、ico、gif、tif格式;<br>
2.图片尺寸通常为16x16、24x24、32x32、64x64、128x128，最大不得超过128x128;<br>
3.如果你希望图标在鼠标点中时的显示有所区别，应该将普通状态的图标和点中时的图标画在一起，左侧为普通状态的图标，右侧为鼠标点中时的图标。例如16x16的图标，尺寸应该是32x16了;<br>
4.建议将图片资源打成zip包部署到服务器，并采用<a href="pub.htm?81#Tag605" target=_blank>图片扩展URL</a>书写，以提高性能;<br>
<br>
<b>方案二：独立图标方案</b><br>
所谓独立图标方案是指每个树杈和树叶可以有不同的图标，这样每个节点的图标需要在数据XML中写明，请参见下面的<a href="#Tag403">“4.XML树”</a>内容，当然也可以通过API函数SetXMLProp( )在js中动态设定;<br>
图标的格式和注意事项请参见方案一，独立图标可以采用硕正套件内置的图标，也可以是自定义图标.<br>
<br>
<b>方案三：混合图标方案</b><br>
即指定了默认图标，但又可以单独为某些节点指定图标.<br>
<div id="Tag402"/><br><br><br>
<font style='font-size:15pt'>3.函数</font> <img src='document.bmp' title='请参见演示页: 3.树控件，该页用到了其中的几个函数'><hr color=#2266ee size=1>
Supcan Tree的函数是通过插件/加载项的 func( string funcname, string paras ) 函数间接调用的，Supcan Tree组件的可用funcname及用途说明如下:<br>
<table width=98% cellpadding=4 cellspacing=0 border=1 borderColorLight=#999999 borderColorDark=#999999 align="center">
<tr bgcolor=#eaeaea><td>函数名</td><td>功能</td><td>参数</td><td>返回值</td></tr>
<tr><td>ReadXML<br>或Build</td><td>读入构造树的XML/JSON</td><td>参数1: XML/JSON的URL，或者直接是XML/JSON大串<br>参数2：可选，父节点的ID，表示插入到该节点下</td><td>(无)</td></tr>
<tr><td>GetCurSel</td><td>取得当前选中项的ID</td><td>(无)</td><td>ID</td></tr>
<tr><td>SetCurSel</td><td>选中某项，当前焦点也相应转移</td><td>ID</td><td>(无)</td></tr>
<tr><td>GetParent</td><td>取得父节点的ID</td><td>ID</td><td>父的ID</td></tr>
<tr><td>GetChild</td><td>取得第一个子节点的ID</td><td>ID，空串表示根</td><td>子的ID</td></tr>
<tr><td>GetNextSibling</td><td>取得下一个兄弟节点的ID</td><td>ID</td><td>兄弟的ID</td></tr>
<tr><td>DeleteItem</td><td>删除某项，包括其子孙</td><td>ID，空串表示根(删除全部)</td><td>(无)</td></tr>
<tr><td>InsertItem</td><td>插入一项</td><td>参数1: ID，须尚未存在<br>参数2(可选): PID，空串表示根节点<br>参数3(可选): text<br>参数4(可选): true/false, 表示在最后追加还是在最前面插入(默认true, 即追加)</td><td>true/false</td></tr>
<tr><td>Expand</td><td>展开某项，包括其子孙</td><td>ID</td><td>(无)</td></tr>
<tr><td>ExpandAll</td><td>展开全部项，包括其子孙</td><td>(无)</td><td>(无)</td></tr>
<tr><td>Collapse</td><td>收拢某项</td><td>ID</td><td>(无)</td></tr>
<tr><td>GetXMLProp</td><td>取得XML某ID的属性值</td><td>参数1: ID<br>参数2: 可为PID、text、para、tip、img、textColor或任意属性</td><td>串</td></tr>
<tr><td>SetXMLProp</td><td>设置XML某ID的属性值</td><td>参数1: ID<br>参数2: 可为PID、text、para、tip、img、textColor或任意属性<br>参数3: 值<br>注：参数2为PID表示更改父节点，作为参数1的ID须为树叶才能生效</td><td>(无)</td></tr>
<tr><td>ChangeImage</td><td>替换图标</td><td>参数1:树杈的图标，写法请参考创建参数"NodeImage"属性<br>参数2:树叶的图标，写法请参考创建参数"LeafImage"属性</td><td>(无)</td></tr>
<tr><td>SetCheck</td><td>设置Check</td><td>参数1:ID<br>参数2:true/false<br>备注：仅用于创建参数Style含hasCheckbox</td><td>(无)</td></tr>
<tr><td>GetCheck</td><td>取得Check</td><td>参数:ID<br>备注：仅用于创建参数Style含hasCheckbox</td><td>true/false</td></tr>
<tr><td>GetCheckedIDs</td><td>取得所有Check=true的ID</td><td>(无)<br>备注：仅用于创建参数Style含hasCheckbox</td><td>ID串, 以逗号分隔</td></tr>
</table>
<img src='glass.jpg'>注：函数中的ID参数是<font color=red>大小写敏感</font>的!<br><br>
此外，Tree还拥有一组和Treelist、Freeform完全一样的全局函数，请参见<a href="globalfunction.htm?81" target=_blank>全局函数</a>介绍。<br>
<div id="Tag403"/><br><br><br>
<font style='font-size:15pt'>4.XML树</font> <img src='document.bmp' title='请参见演示页: "3.树控件"，或"开发文档"左侧的树'><hr color=#2266ee size=1>
Supcan Tree树是通过一个XML创建的，有二种XML格式可供选择。<br>
第一种XML格式类似平面的结果集，由"PID"属性指定父节点，例如:<br>
<pre class='xml'>
<?xml version="1.0" encoding="utf-8"?>
<Data>
<items>
<item ID="10" text="安装|Install" para="act.htm#Tag10" img="2"/>
<item ID="20" text="硕正套件|Supcan RIA Suit" para="act.htm#Tag20" img="12"/>
<item ID="201" PID="20" text="语法|Gramma" para="act.htm#Tag201"/>
<item ID="202" PID="20" text="函数|Function" para="act.htm#Tag202" LazyLoad="true"/>
<item ID="203" PID="20" text="事件|Event" para="act.htm#Tag203"/>
</items>
</Data></pre>
第二种XML格式本身就是一颗树，不需要单独指定"PID", 例如:<br>
<pre class='xml'>
<?xml version="1.0" encoding="utf-8"?>
<Data>
<items>
<item ID="10" text="安装|Install" para="act.htm#Tag10" img="pack.zip#22.jpg"/>
<item ID="20" text="硕正套件|Supcan RIA Suit" para="act.htm#Tag20">
<item ID="201" text="语法|Gramma" para="act.htm#Tag201" LazyLoad="tree.aspx?id=201"/>
<item ID="202" text="函数|Function" para="act.htm#Tag202"/>
<item ID="203" text="事件|Event" para="act.htm#Tag203">
<item ID="20301" text="OnReady" para="act.htm#Tag20301"/>
<item ID="20302" text="OnEvent" para="act.htm#Tag20302"/>
</item>
</item>
</items>
</Data></pre>
XML的属性规则如下:<br>
<table width=98% cellpadding=4 cellspacing=0 border=1 borderColorLight=#999999 borderColorDark=#999999 align="center">
<tr bgcolor=#eaeaea><td>属性</td><td>含义</td></tr>
<tr><td>ID</td><td>ID串，串可包含任意字符，ID必须唯一</td></tr>
<tr><td>PID</td><td>从属的父ID</td></tr>
<tr><td>str 或 text</td><td>显示的文字</td></tr>
<tr><td>tip</td><td>鼠标滑过时的浮动Tip</td></tr>
<tr><td>img 或 image</td><td>内置图标的数字(树叶图标需要加上10)，或自定义图标的URL，支持<a href="pub.htm?81#Tag605" target=_blank>图片扩展URL</a>.<br>注：如果是相对URL，是相对于当前XML文档，而非页面.</td></tr>
<tr><td>para</td><td>可选参数</td></tr>
<tr><td>LazyLoad</td><td>表示有子孙，且是在展开时动态加载的，有2种形式：<br>1.串"true", 表示通过"LazyLoad"事件触发(参见demo页);<br>2.是一个绝对或相对(相对于本XML)URL，用于自动加载，不触发事件.</td></tr>
<tr><td>check 或 checked</td><td>checkbox的值(true/false, 仅用于创建参数含hasCheckBox时)</td></tr>
<tr><td>textColor</td><td>文字的颜色, 如"#FF0000"</td></tr>
<tr><td>其它任意属性</td><td>自定义属性，可通过GetXMLProp( )/SetXMLProp( )存取</td></tr>
</table>
<img src='glass.jpg'><font color="552222">如果text、tip需要有中英文切换功能，那么中英文之间以“|”分隔即可;</font><br>
<img src='glass.jpg'><font color="552222">text也可以这样写: <item id="10">安装</item></font><br>
<img src='glass.jpg'><font color="552222">如果未定义text，那么将显示ID;</font><br>
<div id="Tag404"/><br><br>
<font style='font-size:15pt'>5.事件</font><hr color=#2266ee size=1>
Supcan Tree的OnEvent( id, Event, p1, p2, p3, p4 )事件含义及参数分别如下：<br>
<div id="TagEvent"></div>
<br><br><br><br><br>
<script type='text/javascript' src='nstd.js'></script>
</body></html>