Tree.xml
1<treeview>
2<tree expanded="true" text="根节点">
3<tree expanded="true" text="1.1">
4<tree text="1.1.1">
5<tree text="1.1.1.1">
6<tree target="_blank" text="1.1.1.1.1google" url=" http://www.google.com "></tree>
7<tree text="1.1.1.1.2"></tree>
8</tree>
9<tree text="1.1.1.2"></tree>
10</tree>
11<tree text="1.1.2"></tree>
12</tree>
13<tree text="1.2">
14<tree text="1.2.1"></tree>
15<tree text="1.2.2"></tree>
16</tree>
17</tree>
18</treeview>
Tree.xsl
1<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
2<xsl:template match="/">
3<html>
4<head>
5<script>
6<xsl:comment>
7<![CDATA[
8var CurrentNode = null;
9var iconLeaf = "<span class='clsLeaf'>.</span>";
10var iconExpand = "<span class='clsExpand'>-</span>";
11var iconCollapse = "<span class='clsCollapse'>+</span>";
12function Expand(obj)
13{
14var div = null;
15var img = obj;
16if(obj.tagName != 'SPAN' || obj.className!='clsSpace')
17return (false);
18obj = obj.parentElement;
19var childRen=obj.children;
20for (var i=0;i < childRen.length;i++)
21{
22if(childRen[i].tagName == 'DIV'){
23div = childRen[i];
24break;
25}
26}
27if(div == null)
28return (false);
29if(obj.Expanded.toLowerCase()=='true')
30{
31if(img!=null) img.innerHTML = iconCollapse;
32obj.Expanded='false';
33div.className='hide';
34}
35else
36{
37if(img!=null) img.innerHTML = iconExpand;
38obj.Expanded='true';
39div.className='shown'
40}
41}
42function MouseOver(obj)
43{
44obj.className = "clsMouseOver";
45}
46function MouseOut(obj)
47{
48if(!obj.Checked)
49obj.className = "clsLabel";
50else
51obj.className = "clsCurrentHasFocus";
52}
53function MouseDown(obj)
54{
55obj.className = "clsMouseDown";
56}
57function MouseUp(obj)
58{
59MouseOut(obj);
60}
61function Click(obj)
62{
63if(!obj.Checked)
64{
65if(CurrentNode != null)
66{
67CurrentNode.Checked = false;
68MouseOut(CurrentNode);
69}
70obj.Checked = true;
71CurrentNode = obj;
72}
73else
74obj.Checked = false;
75
76MouseOut(obj);
77}
78]]>
79</xsl:comment>
80</script>
81<style>
82<![CDATA[
83BODY
84{
85cursor:default;
86font-size:9pt;
87background-color:#F1F1F1;
88}
89span
90{
91padding:2px 3px;
92position:relative;
93display:inline;
94top:-2px;
95height:17px;
96border: solid 1px #f1f1f1;
97}
98span.clsLabel
99{
100
101}
102SPAN.clsSpace
103{
104font-family:verdana;
105position:relative;
106padding:3px 2px;
107top:0px;
108width:17px;
109margin:0px;
110cursor:hand;
111overflow:hidden;
112}
113
114span.clsSpace span
115{
116position:relative;
117width:11px;
118height:11px;
119border:solid 1px black;
120background-color:#ffffff;
121}
122
123SPAN.clsCollapse
124{
125line-height:6px;
126font-size:9px;
127overflow:hidden;
128padding:1px;
129}
130
131SPAN.clsExpand
132{
133padding-left:1px;
134overflow:hidden;
135line-height:3px;
136font-size:13px;
137padding-top:3px;
138}
139
140SPAN.clsLeaf
141{
142overflow:visible;
143font-size:9px;
144line-height:3px;
145padding: 1px 0px 0px 3px;
146}
147
148SPAN.clsMouseOver
149{
150background-color:#CCCCCC;
151border:1px solid #999999;
152}
153
154SPAN.clsMouseDown
155{
156background-color:#999999;
157border:1px solid #999999;
158}
159
160SPAN.clsCurrentHasFocus
161{
162background-color:#FFFFFF;
163border:1px solid #999999;
164}
165
166SPAN.clsCurrentNoFocus
167{
168background-color:#F1F1F1;
169border:1px solid #999999;
170}
171
172
173A
174{
175color:black;
176text-decoration:none;
177
178}
179
180span.clsUnavailable
181{
182height:0px;
183padding:0px;
184top:0px;
185border:none;
186color:#888888;
187}
188
189.hide
190{
191display:none;
192}
193
194.shown
195{
196display:block;
197margin-left:15px;
198}
199
200.deeptree IMG
201{
202position:relative;
203cursor:hand;
204top:-2px;
205margin:0px;
206padding:0px;
207}
208
209.treelabel
210{
211font-family:verdana;
212font-size:70.5%;
213color:white;
214}
215
216]]>
217</style>
218<title></title>
219</head>
220<body>
221<xsl:apply-templates select="/TreeView/Tree"></xsl:apply-templates>
222</body>
223</html>
224</xsl:template>
225<xsl:template match="Tree">
226<div class="clsItem" type="parent">
227<xsl:if expr="this.hasChildNodes">
228<xsl:choose>
229<xsl:when test="@Expanded">
230<xsl:attribute name="Expanded">
231<xsl:value-of select="@Expanded"></xsl:value-of>
232</xsl:attribute>
233</xsl:when>
234<xsl:otherwise><xsl:attribute name="Expanded">false</xsl:attribute></xsl:otherwise>
235</xsl:choose>
236</xsl:if>
237<span>
238<xsl:if expr="this.hasChildNodes">
239<xsl:attribute name="onclick">Expand(this)</xsl:attribute>
240</xsl:if>
241<xsl:attribute name="Class">clsSpace</xsl:attribute>
242<xsl:choose>
243<xsl:when expr="this.hasChildNodes">
244<xsl:choose>
245<xsl:when test="@Expanded">
246<xsl:choose>
247<xsl:when test="@Expanded[.='true']">
248<span class="clsExpand">-</span>
249</xsl:when>
250<xsl:otherwise><span class="clsCollapse">+</span></xsl:otherwise>
251</xsl:choose>
252</xsl:when>
253<xsl:otherwise><span class="clsCollapse">+</span></xsl:otherwise>
254</xsl:choose>
255</xsl:when>
256<xsl:otherwise><span class="clsLeaf">.</span></xsl:otherwise>
257</xsl:choose>
258</span>
259<span class="clsLabel" onclick="Click(this)" onmousedown="MouseDown(this)" onmouseout="MouseOut(this)" onmouseover="MouseOver(this)" onmouseup="MouseUp(this)">
260<xsl:attribute name="title"><xsl:value-of select="@Text"></xsl:value-of></xsl:attribute>
261<xsl:choose>
262<xsl:when test="@URL">
263<a>
264<xsl:choose>
265<xsl:when test="@Target">
266<xsl:attribute name="target"><xsl:value-of select="@Target"></xsl:value-of></xsl:attribute>
267</xsl:when>
268<xsl:otherwise>
269<xsl:attribute name="target">_blank</xsl:attribute>
270</xsl:otherwise>
271</xsl:choose>
272<xsl:attribute name="Href">
273<xsl:value-of select="@URL"></xsl:value-of>
274</xsl:attribute>
275<xsl:value-of select="@Text"></xsl:value-of>
276</a>
277</xsl:when>
278<xsl:otherwise><xsl:value-of select="@Text"></xsl:value-of></xsl:otherwise>
279</xsl:choose>
280</span>
281<xsl:if expr="this.hasChildNodes">
282<div>
283<xsl:choose>
284<xsl:when test="@Expanded">
285<xsl:choose>
286<xsl:when test="@Expanded[.='true']">
287<xsl:attribute name="class">shown</xsl:attribute>
288</xsl:when>
289<xsl:otherwise>
290<xsl:attribute name="class">hide</xsl:attribute>
291</xsl:otherwise>
292</xsl:choose>
293</xsl:when>
294<xsl:otherwise>
295<xsl:attribute name="class">hide</xsl:attribute>
296</xsl:otherwise>
297</xsl:choose>
298<xsl:choose>
299<xsl:when test="@Expanded">
300<xsl:attribute name="Expanded">
301<xsl:value-of select="@Expanded"></xsl:value-of>
302</xsl:attribute>
303</xsl:when>
304<xsl:otherwise><xsl:attribute name="Expanded">false</xsl:attribute></xsl:otherwise>
305</xsl:choose>
306<xsl:apply-templates select="Tree"></xsl:apply-templates>
307</div>
308</xsl:if>
309</div>
310</xsl:template>
311</xsl:stylesheet>